/* ═══════════════════════════════════════════════════════════════════════ GIL — Design System do Dashboard · camada --ds- ═══════════════════════════════════════════════════════════════════════ Este arquivo É o sistema visual do dashboard aprovado (a "tela roxa" da v3), com UMA mudança deliberada: o acento deixa de ser roxo/indigo e passa a ser o AZUL DA MARCA LUGUE. ── De onde vem o azul ── O azul foi amostrado do logo (public/img/lugue-logo-final.png): a cor sólida da marca é #1818ff — 556 mil pixels do arquivo — um ultramarino de hue 267. #1818ff cru tem L≈0.47: como acento sobre fundo escuro ele afunda. Então o token de ação usa o MESMO hue (267), porém mais claro — "azul mais claro do tom da logo". A marca continua reconhecível e o contraste fecha. ── O que mudou em relação à v3 (roxo) ── SÓ o acento. Superfícies, tinta, semântica de dado (pos/warn/crit), raio, tipografia, ritmo e sombra são idênticos à tela aprovada. Trocar a paleta inteira seria refazer o design; o pedido foi trocar a cor do acento. ── Princípios herdados da v3 ── 1. O acento é CROMO (interface): botão primário, foco, seleção, gráfico. Nunca é dado. Dado tem três cores e só três: pos / warn / crit. 2. Zero legítimo renderiza neutro. R$ 0,00 "em atraso" é boa notícia. 3. Elevação por luminância + hairline. Sombra só no que de fato flutua. 4. Numeral tabular em toda coluna de valor. Sentence case na interface. ── Contraste (medido, não estimado) ── Todos os pares texto/fundo verificados em sRGB nos dois temas passam WCAG AA (≥4.5:1). O acento como TEXTO só aparece no tema claro, onde ele fecha em 0.48 de L de propósito. Não clarear o acento do tema claro sem re-medir. ── Como usar ── antes do CSS dos módulos. Estilize SEMPRE via var(--ds-*), nunca cor hardcoded. O tema vive em [data-theme] no (dark é o default). Ao final há um bloco de COMPATIBILIDADE que mapeia --v3-* → --ds-*: com ele, o protótipo v3 existente funciona sem tocar no HTML/JS — só troca a cor. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── Canvas e superfícies — slate com leve viés azul (hue 265), croma baixo. Idêntico à v3: elevação sobe por luminância (canvas→surface→2→3). ── */ --ds-canvas: oklch(0.155 0.012 265); --ds-surface: oklch(0.205 0.014 265); --ds-surface-2: oklch(0.245 0.016 265); /* hover, card elevado */ --ds-surface-3: oklch(0.295 0.018 265); /* trilhos, avatar, fundo de barra */ --ds-glass: oklch(0.205 0.014 265 / 0.72); --ds-line: oklch(1 0 0 / 0.09); --ds-line-2: oklch(1 0 0 / 0.16); /* ── Tinta — 3 níveis, hierarquia por peso/tamanho ── */ --ds-ink: oklch(0.97 0.004 265); --ds-ink-2: oklch(0.76 0.014 265); --ds-ink-3: oklch(0.63 0.016 265); /* ── Acento = AZUL DA MARCA (hue 267 do #1818ff), clareado ── --accent : TOKEN ÚNICO E CANÔNICO do acento. É a ÚNICA cor de acento do dashboard — mude aqui e muda em toda a tela. Azul. Não crie outro token de acento (teal --d-accent está morto, legado --blue não vale aqui). Ver CLAUDE.md. --brand : ação primária, foco, seleção, ponto de gravidade (= --accent) --brand-2 : companheiro mais claro — usado no fim do gradiente do anel/sparkline e em hover de ícone É CROMO, não dado. Não usar para valor. */ --accent: oklch(0.64 0.2 264); --ds-brand: var(--accent); --ds-brand-2: oklch(0.74 0.15 260); --ds-brand-soft: oklch(0.64 0.2 264 / 0.16); --ds-brand-line: oklch(0.64 0.2 264 / 0.42); --ds-focus: oklch(0.72 0.16 264); /* ── Semântica de DADO — as três únicas cores de valor. Nunca decorativas; só entram quando o valor merece. ── */ --ds-pos: oklch(0.78 0.16 158); --ds-warn: oklch(0.83 0.145 82); --ds-crit: oklch(0.7 0.19 22); --ds-pos-soft: oklch(0.78 0.16 158 / 0.13); --ds-warn-soft: oklch(0.83 0.145 82 / 0.13); --ds-crit-soft: oklch(0.7 0.19 22 / 0.13); --ds-pos-line: oklch(0.78 0.16 158 / 0.34); --ds-warn-line: oklch(0.83 0.145 82 / 0.34); --ds-crit-line: oklch(0.7 0.19 22 / 0.34); /* ── Raio — cantos macios ── */ --ds-r-sm: 10px; --ds-r: 16px; --ds-r-lg: 22px; --ds-pill: 999px; /* ── Tipografia — escala fixa, piso de 12px. A métrica é 26px calibrada contra o pior caso real ("R$ 1.184.320,00" numa coluna de ~290px). Não subir sem re-medir: valor monetário estourando a coluna é o jeito mais rápido de uma tela bonita virar tela quebrada. ── */ --ds-t-meta: 12px; /* chips, meta-info */ --ds-t-cap: 13px; /* secundário, labels de linha */ --ds-t-body: 14px; /* corpo */ --ds-t-sub: 16px; /* subtítulo de card */ --ds-t-title: 22px; /* título de seção/tela */ --ds-t-metric: 26px; /* métrica de painel */ --ds-t-hero: 34px; /* métrica de destaque */ --ds-w-reg: 400; --ds-w-med: 500; --ds-w-semi: 600; --ds-font: Inter, "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; /* ── Ritmo — escala variada de propósito; espaçamento uniforme é o tell ── */ --ds-s1: 4px; --ds-s2: 8px; --ds-s3: 12px; --ds-s4: 18px; --ds-s5: 26px; --ds-s6: 40px; /* ── Movimento — 150–260ms, ease-out, sem bounce ── */ --ds-ease: 160ms cubic-bezier(0.22, 0.7, 0.28, 1); --ds-slow: 260ms cubic-bezier(0.22, 0.7, 0.28, 1); --ds-spring: 420ms cubic-bezier(0.16, 1, 0.3, 1); /* ── Sombra — só no que de fato flutua ── */ --ds-shadow: 0 2px 6px oklch(0 0 0 / 0.3), 0 18px 44px oklch(0 0 0 / 0.34); --ds-shadow-soft: 0 1px 3px oklch(0 0 0 / 0.26); /* Numerais tabulares — alinha coluna de valores */ --ds-num: "tnum" 1, "lnum" 1; } /* ═══════════════════════════════════════════════════════════════════════ TEMA CLARO — [data-theme="light"] no Só redefine tokens; componentes nunca estilizam dentro deste seletor. O acento fecha para L≈0.48 pra passar contraste como texto sobre branco. ═══════════════════════════════════════════════════════════════════════ */ [data-theme="light"] { --ds-canvas: oklch(0.975 0.004 265); --ds-surface: oklch(1 0 0); --ds-surface-2: oklch(0.975 0.004 265); --ds-surface-3: oklch(0.945 0.008 265); --ds-glass: oklch(1 0 0 / 0.78); --ds-line: oklch(0.2 0.02 265 / 0.11); --ds-line-2: oklch(0.2 0.02 265 / 0.2); --ds-ink: oklch(0.24 0.02 265); --ds-ink-2: oklch(0.46 0.02 265); --ds-ink-3: oklch(0.55 0.02 265); /* azul da marca fechado pra funcionar como texto/cromo sobre branco. Mesmo token único --accent, valor recalibrado pro tema claro. */ --accent: oklch(0.48 0.2 264); --ds-brand: var(--accent); --ds-brand-2: oklch(0.52 0.17 260); --ds-brand-soft: oklch(0.48 0.2 264 / 0.1); --ds-brand-line: oklch(0.48 0.2 264 / 0.32); --ds-focus: oklch(0.45 0.2 264); --ds-pos: oklch(0.5 0.14 158); --ds-warn: oklch(0.44 0.11 70); --ds-crit: oklch(0.52 0.2 25); --ds-pos-soft: oklch(0.5 0.14 158 / 0.1); --ds-warn-soft: oklch(0.44 0.11 70 / 0.1); --ds-crit-soft: oklch(0.52 0.2 25 / 0.1); --ds-pos-line: oklch(0.5 0.14 158 / 0.3); --ds-warn-line: oklch(0.44 0.11 70 / 0.3); --ds-crit-line: oklch(0.52 0.2 25 / 0.3); --ds-shadow: 0 2px 6px oklch(0.2 0.02 265 / 0.06), 0 16px 40px oklch(0.2 0.02 265 / 0.1); --ds-shadow-soft: 0 1px 3px oklch(0.2 0.02 265 / 0.07); } /* ═══════════════════════════════════════════════════════════════════════ COMPATIBILIDADE — --v3-* → --ds-* Mantém o protótipo v3 (dashboard-variacoes.html / dashboard-v3.html) funcionando sem editar HTML/JS: só trocar o roxo pelo azul. Se você reescrever os módulos usando --ds-* diretamente, pode remover este bloco. ═══════════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { --v3-canvas: var(--ds-canvas); --v3-surface: var(--ds-surface); --v3-surface-2: var(--ds-surface-2); --v3-surface-3: var(--ds-surface-3); --v3-glass: var(--ds-glass); --v3-line: var(--ds-line); --v3-line-2: var(--ds-line-2); --v3-ink: var(--ds-ink); --v3-ink-2: var(--ds-ink-2); --v3-ink-3: var(--ds-ink-3); --v3-brand: var(--ds-brand); --v3-brand-2: var(--ds-brand-2); --v3-brand-soft: var(--ds-brand-soft); --v3-brand-line: var(--ds-brand-line); --v3-focus: var(--ds-focus); --v3-pos: var(--ds-pos); --v3-warn: var(--ds-warn); --v3-crit: var(--ds-crit); --v3-pos-soft: var(--ds-pos-soft); --v3-warn-soft: var(--ds-warn-soft); --v3-crit-soft: var(--ds-crit-soft); --v3-pos-line: var(--ds-pos-line); --v3-warn-line: var(--ds-warn-line); --v3-crit-line: var(--ds-crit-line); --v3-r-sm: var(--ds-r-sm); --v3-r: var(--ds-r); --v3-r-lg: var(--ds-r-lg); --v3-pill: var(--ds-pill); --v3-t-meta: var(--ds-t-meta); --v3-t-cap: var(--ds-t-cap); --v3-t-body: var(--ds-t-body); --v3-t-sub: var(--ds-t-sub); --v3-t-title: var(--ds-t-title); --v3-t-metric: var(--ds-t-metric); --v3-t-hero: var(--ds-t-hero); --v3-w-reg: var(--ds-w-reg); --v3-w-med: var(--ds-w-med); --v3-w-semi: var(--ds-w-semi); --v3-s1: var(--ds-s1); --v3-s2: var(--ds-s2); --v3-s3: var(--ds-s3); --v3-s4: var(--ds-s4); --v3-s5: var(--ds-s5); --v3-s6: var(--ds-s6); --v3-ease: var(--ds-ease); --v3-slow: var(--ds-slow); --v3-spring: var(--ds-spring); --v3-shadow: var(--ds-shadow); --v3-shadow-soft: var(--ds-shadow-soft); --v3-num: var(--ds-num); } /* ═══════════════════════════════════════════════════════════════════════ COMPATIBILIDADE DE ACENTO — telas legadas (--blue) → --accent canônico ─────────────────────────────────────────────────────────────────────── As telas legadas (§3/§21: CNH, extrator, cadastros antigos, etc.) usam --blue / --blue-light / --border-focus como cor de acento. Aqui elas passam a PUXAR do --accent (azul da marca Lugue), unificando a cor de ação/foco em TODO o app com o dashboard — sem tocar em layout, superfície, tipografia ou uppercase dessas telas. Escopo deliberadamente mínimo (só cor de acento). Este arquivo carrega DEPOIS de tokens.css, então o override acontece na cascata natural, sem !important. Cores hardcoded (ex.: rgba(56,139,253,...)) NÃO são afetadas — ficam pra uma refatoração tela-a-tela, se um dia for pedida. --blue (legado #388bfd / #2563eb) → --accent --blue-light (legado #58a6ff) → --ds-brand-2 (companheiro claro) --border-focus(legado #388bfd / #2563eb) → --accent ═══════════════════════════════════════════════════════════════════════ */ :root, [data-theme="light"] { --blue: var(--accent); --blue-light: var(--ds-brand-2); --border-focus: var(--accent); }