/* public/design-system.css — fundação visual única do Portal Ligue.
*
* Fase 2 (unificação visual, 17/09/2026): antes deste arquivo existiam 3
* sistemas de token paralelos — styles.css (marca/legado, nomes em PT),
* painel.css (produto, nomes em EN) e cockpit.css (cópia de painel.css com
* prefixo --ck-), mais duas páginas públicas (envio.html/simulacao.html)
* com paleta inteira hardcoded em hex, sem variável nenhuma. Este arquivo é
* a ÚNICA fonte de verdade de cor/tipografia/raio/espaçamento agora.
*
* styles.css, painel.css e cockpit.css continuam existindo (têm milhares de
* linhas de layout de componente que não fazem parte desta fase), mas seus
* :root viraram só ALIAS para os tokens daqui — nenhum dos três declara mais
* um valor de cor próprio. Isso existe porque public/app.js e public/painel.js
* referenciam os nomes antigos (--texto-3, --crit-fg, --ck-tinta...) 158
* vezes em estilo inline gerado por JS; migrar esses dois arquivos é Fase 3,
* separada — aqui a prioridade foi ter UM valor por conceito, não zero nomes
* antigos.
*
* Fonte do Google: carregada pelo no de cada página (não por
* @import aqui) — @import de fonte bloquearia o parse desta folha inteira
* até a fonte chegar; o usa o truque media="print" +
* onload="this.media='all'" pra não travar o primeiro paint.
*/
:root {
/* ---------------------------------------------------------- Tipografia */
--font-sans: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* ------------------------------------------------------ Marca (ação/CTA)
Separada das cores semânticas de propósito: mesma família de vermelho,
papel diferente (marca vs. status) — nunca conflitar as duas mesmo que
um redesign futuro mude só uma delas. */
--color-primary: #E11D2A;
--color-primary-hover: #B81622;
/* ------------------------------------------------- Escala de tinta (texto
+ superfícies escuras). Um único token serve os dois papéis quando o
valor coincide (--color-ink-900 é tanto o texto mais escuro quanto a
superfície escura do menu/hero) — mesmo padrão que painel.css já usava
bem antes desta unificação. ink-400 não tem par no Painel: é mantido
como degrau próprio porque nada de lá chegava tão claro quanto o
--texto-3 do legado — convergir os dois escureceria texto secundário em
todo o app interno. */
--color-ink-900: #121721;
--color-ink-700: #39404E;
--color-ink-600: #4A5261;
--color-ink-500: #5A6373;
--color-ink-400: #9298A3;
/* ------------------------------------------------------------ Superfícies */
--color-page: #F6F7F9;
--color-surface: #FFFFFF;
--color-surface-subtle: #FBFCFD;
--color-surface-inset: #F7F8FB;
--color-surface-muted: #F0F2F6;
/* ----------------------------------------------------------------- Bordas */
--color-border: #E6E9EF;
--color-border-subtle: #EDEFF4;
--color-border-strong: #DFE3EA;
--color-border-dashed: #C9CFDA;
/* ------------------------------------------------------------- Semânticas
Tom do Painel/Cockpit (mais neutro) venceu como padrão único — decisão
do dono, 17/09/2026: o app legado (styles.css) usava vermelho/âmbar/azul
mais saturados para o mesmo papel; convergiram pra cá. O "-bar" de cada
tom só existia no Cockpit (barra de progresso, mais vivo que o "fg" pra
ficar legível em faixa fina). */
--color-danger: #A8200F; --color-danger-bg: #FDECEA; --color-danger-border: #F1C4BD; --color-danger-bar: #C8412C;
--color-warning: #8A5A00; --color-warning-bg: #FFF5E0; --color-warning-border: #F2D9A0; --color-warning-bar: #D9A32B;
--color-info: #2B4ACB; --color-info-bg: #ECF0FE; --color-info-border: #C6D2FA; --color-info-bar: #5C7CE8;
--color-success: #12684A; --color-success-bg: #E8F7EF; --color-success-border: #B5E3CB; --color-success-bar: #2E9A70;
--color-neutral: #4A5261; --color-neutral-bg: #EEF0F5; --color-neutral-border: #CFD5DF; --color-neutral-bar: #8B95A4;
--color-unavailable: #5A6373; --color-unavailable-bg: #EEF0F5; --color-unavailable-border: #CFD5DF;
--color-context: #1B2A6B; --color-context-bg: #EFF2FE; --color-context-border: #C6D2FA;
/* --------------------------------------------------------------- Raio
Escala de 3 degraus que já existia (só no Cockpit, --ck-raio-g/m/p) —
era a única sistemática dos 3; estendida com sm e pill. */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-pill: 999px;
/* ------------------------------------------------------------ Espaçamento
Novo — nenhum dos 3 sistemas tinha escala; hoje cada regra tem seu
próprio valor solto. Os degraus abaixo seguem os incrementos que já
dominavam informalmente o código. */
--spacing-2xs: 4px;
--spacing-xs: 8px;
--spacing-sm: 12px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
/* ------------------------------------------------------------- Sombra
Só o app legado (styles.css) usa — Painel/Cockpit optaram por cartão
plano com borda, sem sombra, de propósito. Token disponível, não
imposto. */
--shadow-sm: 0 1px 3px rgba(20, 22, 28, 0.08), 0 4px 16px rgba(20, 22, 28, 0.06);
}