/* Tokens v2 — sistema visual derivado da marca (BRAND_ASSETS.md): índigo #4223D1 e a superfície escura #09090B. Aprovado por Helber em 03/08 sobre o mockup docs/02-engineering/design-proposal-v2.html. Tema escuro nativo: automático pelo sistema (prefers-color-scheme) e alternável pelo usuário (data-theme no , persistido). Regra do cascade: componentes SEMPRE estilizam via token — nunca hex direto de tema. */ :root { /* Marca — valores exatos dos arquivos-fonte; não recolorir */ --brand-primary: #4223d1; --brand-on-primary: #ffffff; --brand-dark-surface: #09090b; /* Acento e derivados */ --color-primary: var(--brand-primary); --color-primary-hover: #371cb0; --color-focus-ring: #4223d1; --brand-soft: #ece9fb; --brand-glow: rgba(66, 35, 209, 0.22); /* Superfícies e texto (claro: branco com tinta de índigo, nunca cinza puro) */ --color-bg: #f7f7fb; --color-surface: #ffffff; --color-raised: #ffffff; --color-text: #17171d; --color-text-muted: #5b5b66; --color-border: #e6e5f0; /* Profundidade */ --shadow-1: 0 1px 2px rgba(23, 23, 29, 0.05), 0 2px 8px rgba(23, 23, 29, 0.05); --shadow-2: 0 2px 4px rgba(23, 23, 29, 0.06), 0 12px 28px rgba(23, 23, 29, 0.09); /* Semânticas (independentes do acento) */ --ok: #1d8a63; --warn: #b45309; --danger: #be3a44; /* Faixas do relatório: intensidade de SINAL, não semáforo de risco (SCORING §5) */ --band-limited: #6d6a85; --band-attention: #b45309; --band-relevant: #c2410c; --band-widespread: #9f2a3c; /* Espaçamento (escala de 4) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; /* Tipografia */ --font-sans: "Seravek", "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, -apple-system, "Noto Sans", sans-serif; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; /* Componentes e motion */ --radius: 0.65rem; --radius-lg: 1rem; --motion: 150ms ease; --touch-target: 44px; --content-max: 72rem; --nav-width: 16rem; --header-height: 3.5rem; } /* Tema escuro pelo sistema — só tokens mudam; componentes não sabem de tema. */ @media (prefers-color-scheme: dark) { :root { --color-bg: #09090b; --color-surface: #141319; --color-raised: #1b1a23; --color-text: #edecf5; --color-text-muted: #9c9aad; --color-border: #282733; --brand-soft: #241b52; --brand-glow: rgba(115, 92, 235, 0.3); --color-focus-ring: #8f7bf0; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 36px rgba(0, 0, 0, 0.5); --band-limited: #8d8aa8; } } /* Escolha explícita do usuário vence o sistema, nas duas direções. */ :root[data-theme="dark"] { --color-bg: #09090b; --color-surface: #141319; --color-raised: #1b1a23; --color-text: #edecf5; --color-text-muted: #9c9aad; --color-border: #282733; --brand-soft: #241b52; --brand-glow: rgba(115, 92, 235, 0.3); --color-focus-ring: #8f7bf0; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.35); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.5), 0 16px 36px rgba(0, 0, 0, 0.5); --band-limited: #8d8aa8; } :root[data-theme="light"] { --color-bg: #f7f7fb; --color-surface: #ffffff; --color-raised: #ffffff; --color-text: #17171d; --color-text-muted: #5b5b66; --color-border: #e6e5f0; --brand-soft: #ece9fb; --brand-glow: rgba(66, 35, 209, 0.22); --color-focus-ring: #4223d1; --shadow-1: 0 1px 2px rgba(23, 23, 29, 0.05), 0 2px 8px rgba(23, 23, 29, 0.05); --shadow-2: 0 2px 4px rgba(23, 23, 29, 0.06), 0 12px 28px rgba(23, 23, 29, 0.09); --band-limited: #6d6a85; }