/* ============================================================ WORKFACILIT — THEME · WF Design System (fonte da verdade das cores) ------------------------------------------------------------ • Claro = :root • Escuro = :root[data-theme="dark"] (passo próprio, nunca inversão) • Toda cor do site sai de var(--wf-*). Hex/rgb() só existem AQUI. • data-theme efetivo (light|dark) é resolvido por js/theme.js (preferência: Claro · Escuro · Sistema → localStorage "wf-theme"). ============================================================ */ :root { color-scheme: light; /* ── Marca (NAVY — única cor de marca) ── */ --wf-primary: #113355; /* CTAs, links, ativo, foco */ --wf-primary-dark: #0A2138; /* hover (sempre mais escuro que primary) */ --wf-primary-darker: #020F1D; /* fim de gradiente / superfície profunda */ --wf-primary-light: #DEE8F2; /* badge, item ativo, fundo suave de marca */ --wf-primary-lighter: #E9F0F7; --wf-primary-subtle: #F0F5F9; /* nav ativo, realce discreto */ --wf-gradient-primary: linear-gradient(135deg, #113355 0%, #0A2138 100%); /* ── Texto ── */ --wf-text-primary: #212121; --wf-text-secondary: #424242; --wf-text-tertiary: #616161; /* LACUNA DS: sem valor no claro; #616161 = 5.9:1 sobre #FFF (AA) */ --wf-text-muted: #9E9E9E; /* só p/ placeholder/desabilitado/decorativo (não é AA) */ /* ── Superfícies e bordas ── */ --wf-bg-page: #F7F8FA; --wf-bg-surface: #FFFFFF; --wf-bg-subtle: #F8F9FB; --wf-border: #ECEEF2; --wf-border-strong: #E0E0E0; --wf-border-light: #F0F0F5; /* ── Semântica (só estado: sucesso / erro / alerta / info) ── */ --wf-success-strong: #2E7D32; --wf-success: #4CAF50; --wf-success-light: #E8F5E9; --wf-danger-strong: #C62828; --wf-danger: #F44336; --wf-danger-light: #FFEBEE; --wf-warning-strong: #E65100; --wf-warning: #FF9800; --wf-warning-light: #FFF3E0; --wf-info-strong: #00695C; --wf-info: #00ACC1; --wf-info-light: #E0F2F1; /* ── CECI (assistente IA) — violeta EXCLUSIVO da Ceci ── */ --wf-ai-ceci: #7C5CFC; --wf-ai-ceci-soft: #F1EDFF; --wf-ai-ceci-text: color-mix(in srgb, var(--wf-ai-ceci) 72%, var(--wf-primary-darker)); /* LACUNA DS: texto AA sobre ceci-soft */ --wf-ceci-icon-bg: #0f0241; /* ── Categóricas: SÓ gráficos/dados ── */ --wf-chart-1: #5B5BD6; --wf-chart-2: #2E7CC4; --wf-chart-3: #10B981; --wf-chart-4: #F97316; --wf-chart-5: #06B6D4; --wf-chart-6: #EC4899; /* ── Papéis derivados (aliases dos tokens acima; não são tons novos) ── */ /* LACUNA DS: --wf-warning-strong (#E65100) dá 3.8:1 no branco (: SVG em data-URI não aceita var(); o valor do token é embutido aqui (única exceção fora de var()). */ --wf-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23616161' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --wf-on-primary: var(--wf-bg-surface); /* texto sobre fundo --wf-primary */ --wf-on-deep: #FFFFFF; /* texto sobre superfície profunda (--wf-gradient-primary / primary-darker) */ --wf-gradient-accent: linear-gradient(135deg, var(--wf-primary) 0%, var(--wf-primary-dark) 100%); /* preenchimento de acento (barras, chips) */ --wf-gradient-text: linear-gradient(135deg, var(--wf-primary) 0%, var(--wf-primary-dark) 100%); /* título em gradiente (legível nos 2 temas) */ --wf-glow: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--wf-primary) 8%, transparent), transparent 40%); --wf-fx-k: .4; /* escala de sombras/glows: mais leve no claro */ /* ── Tipografia / layout / movimento (não-cor, herdados de variables.css) ── */ --wf-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --wf-display: 'Plus Jakarta Sans', var(--wf-sans); --wf-max: 1280px; --wf-narrow: 860px; --wf-section: 8rem; --wf-r-sm: 6px; --wf-r-md: 12px; --wf-r-lg: 16px; --wf-r-xl: 24px; --wf-r-full: 9999px; --wf-ease: cubic-bezier(0.16, 1, 0.3, 1); --wf-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } :root[data-theme="dark"] { color-scheme: dark; --wf-primary: #6AA0FF; /* navy clareia p/ legibilidade sobre fundo escuro */ --wf-primary-dark: #4E86E8; --wf-primary-darker: #0B1B2E; --wf-primary-light: #17293F; --wf-primary-lighter: var(--wf-primary-light); /* LACUNA DS: sem valor no escuro */ --wf-primary-subtle: #15202E; --wf-gradient-primary: linear-gradient(135deg, #0B1B2E 0%, #15202E 100%); --wf-text-primary: #EAF0F7; --wf-text-secondary: #C4CEDA; --wf-text-tertiary: #94A2B2; --wf-text-muted: #6C7B8C; --wf-bg-page: #0E1520; --wf-bg-surface: #151E2B; --wf-bg-subtle: #1A2432; --wf-border: #27313F; --wf-border-strong: #35414F; --wf-border-light: #212B38; --wf-success-strong: #7FE0A6; --wf-danger-strong: #FF8E8E; --wf-warning-strong: #FFB874; --wf-info-strong: #6FD8CE; /* LACUNA DS: *-light não tem valor no escuro (o claro ofuscaria). Derivados dos próprios tokens: */ --wf-success-light: color-mix(in srgb, var(--wf-success) 16%, var(--wf-bg-surface)); --wf-danger-light: color-mix(in srgb, var(--wf-danger) 16%, var(--wf-bg-surface)); --wf-warning-light: color-mix(in srgb, var(--wf-warning) 16%, var(--wf-bg-surface)); --wf-info-light: color-mix(in srgb, var(--wf-info) 16%, var(--wf-bg-surface)); --wf-ai-ceci-soft: #221C3A; --wf-ai-ceci-text: color-mix(in srgb, var(--wf-ai-ceci) 55%, var(--wf-text-primary)); --wf-chart-1: #7C89FF; /* re-declarados aqui para resolverem com os valores ESCUROS também dentro de css/theme-deep.css */ --wf-gradient-accent: linear-gradient(135deg, var(--wf-primary) 0%, var(--wf-primary-dark) 100%); --wf-gradient-text: linear-gradient(135deg, var(--wf-primary) 0%, var(--wf-primary-dark) 100%); --wf-glow: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--wf-primary) 8%, transparent), transparent 40%); --wf-on-primary: var(--wf-bg-page); /* sobre #6AA0FF o texto escuro tem 6.9:1 */ --wf-on-deep: var(--wf-text-primary); --wf-warning-text: var(--wf-warning-strong); --wf-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394A2B2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); --wf-fx-k: 1; }