/* SIGO Visual Refinement — design tokens */

:root {
    /* ── Brand ─────────────────────────────────────────────────── */
    --sigo-navy:        #152341;
    --sigo-navy-mid:    #2a5298;
    --sigo-cyan:        #2fd3ff;
    --sigo-orange:      #ff7440;
    --sigo-green:       #00a660;
    /* Navy mais escuro usado em paineis de resumo (Contratos/Orçamentos) e como
       cor de marca principal — já era referenciado como fallback (var(--sigo-primary, #020234))
       em OrcamentosVisualizar.razor/ContratosVisualizar.razor sem existir de fato; definido
       aqui para esses fallbacks passarem a resolver o token em vez de sempre cair no hex. */
    --sigo-primary:     #020234;
    /* Era #1aabff (2,53:1 no branco — reprovava AA). #0a75b8 = 4,94:1. */
    --sigo-link:        #0a75b8;

    /* ── Surfaces ───────────────────────────────────────────────── */
    --sigo-bg:          #f4f6fb;
    --sigo-surface:     #ffffff;
    --sigo-border:      #dde5f3;

    /* ── Typography ─────────────────────────────────────────────── */
    --sigo-font-family: 'Hanken Grotesk', system-ui, sans-serif;
    --sigo-text:        #152341;
    --sigo-text-body:   #3d4a68;
    --sigo-muted:       #65738a;
    /* Tom mais claro que --sigo-muted, para texto auxiliar/caption (ex.: descrição
       abaixo de um switch) — era hardcoded como #94A3B8 em ~20 arquivos .razor.
       2026-10-12: #94a3b8 → #7c889e (2,56:1 → 3,58:1). Só para texto secundário
       não essencial, placeholder e ícone decorativo; texto que o usuário PRECISA
       ler usa --sigo-muted (4,80:1). */
    --sigo-muted-light: #7c889e;

    /* ── Radii ───────────────────────────────────────────────────── */
    --sigo-radius:      10px;
    --sigo-radius-card: 10px;

    /* ── Interactive ─────────────────────────────────────────────── */
    --sigo-hover-bg:    #e5f9ff;
    --sigo-focus-ring:  0 0 0 3px rgba(47, 211, 255, 0.18);

    /* ── Shadows ─────────────────────────────────────────────────── */
    --sigo-shadow:      0px 1px 4px 0px rgba(130, 143, 163, 0.15);
    --sigo-shadow-lg:   0 4px 12px rgba(130, 143, 163, 0.22);

    /* ── Icon square ─────────────────────────────────────────────── */
    --sigo-icon-grad:   linear-gradient(135deg, #152341 0%, #2a5298 100%);

    /* ── Tons de indicador (KpiCard, WsMedidor) ───────────────────────
       Par por tom: cor de PREENCHIMENTO (barra, faixa de destaque) + TINTA (ícone sobre o
       fundo tingido a 14%). Status = paleta de status de referência do guia de dataviz, fixa
       (bom/atenção/crítico) — usada só quando o valor TEM esse significado, sempre com ícone +
       texto (o amarelo tem 1,83:1 no branco; a cor nunca carrega o significado sozinha).
       Marca = slot 1 da paleta de gráficos (--viz-1). Tintas validadas: ≥ 5,4:1 sobre o
       fundo tingido nos dois temas. */
    --sigo-tom-neutro:        #152341;  --sigo-tom-neutro-tinta:  #152341;
    --sigo-tom-marca:         #2a78d6;  --sigo-tom-marca-tinta:   #1c5cab;
    --sigo-tom-bom:           #0ca30c;  --sigo-tom-bom-tinta:     #006300;
    --sigo-tom-atencao:       #fab219;  --sigo-tom-atencao-tinta: #8a5a00;
    --sigo-tom-critico:       #d03b3b;  --sigo-tom-critico-tinta: #b02a2a;
    --sigo-tom-info:          #0891b2;  --sigo-tom-info-tinta:    #0e7490;

    /* ══ CAMADA SEMÂNTICA (2026-10-12) — docs/08-cores.md ══════════════
       Código novo usa ESTES nomes (pelo papel), nunca a cor de marca crua.
       Cada um tem valor próprio no tema escuro, então nenhum componente
       precisa de override [data-theme="dark"] só para cor. */

    /* Interação: hover / ativo / selecionado */
    --sigo-accent-ink:     #152341;                 /* texto+ícone em hover/ativo (navy → ciano no escuro) */
    --sigo-accent-strong:  #2fd3ff;                 /* indicador: barra do item ativo, foco, sublinhado de aba */
    --sigo-selected-bg:    rgba(21, 35, 65, 0.08);  /* fundo do item ativo/selecionado */

    /* Ação principal (botão filled primário) — o "faça isto" da tela */
    --sigo-cta-bg:         #152341;
    --sigo-cta-fg:         #ffffff;

    /* Ação secundária — roxo oficial (decisão 2026-10-12), espelha Secondary do WebsideTheme.cs */
    --sigo-secundaria:     #6366f1;
    --sigo-secundaria-fg:  #ffffff;

    /* Status: preenchimento (barra/ponto) · tinta (texto/ícone) · fundo (chip/alerta) */
    --sigo-sucesso:        var(--sigo-tom-bom);
    --sigo-sucesso-tinta:  var(--sigo-tom-bom-tinta);
    --sigo-sucesso-fundo:  color-mix(in srgb, var(--sigo-tom-bom) 12%, transparent);
    --sigo-atencao:        var(--sigo-tom-atencao);
    --sigo-atencao-tinta:  var(--sigo-tom-atencao-tinta);
    --sigo-atencao-fundo:  color-mix(in srgb, var(--sigo-tom-atencao) 16%, transparent);
    --sigo-perigo:         var(--sigo-tom-critico);
    --sigo-perigo-tinta:   var(--sigo-tom-critico-tinta);
    --sigo-perigo-fundo:   color-mix(in srgb, var(--sigo-tom-critico) 12%, transparent);
    --sigo-info:           var(--sigo-tom-info);
    --sigo-info-tinta:     var(--sigo-tom-info-tinta);
    --sigo-info-fundo:     color-mix(in srgb, var(--sigo-tom-info) 12%, transparent);

    /* Destaque (laranja da marca) — "olhe aqui": novidade, conquista, prazo.
       Escasso de propósito: no máximo 1 por tela, para não perder o efeito. */
    --sigo-destaque:       #ff7440;
    --sigo-destaque-tinta: #c2410c;                 /* 5,18:1 no branco */
    --sigo-destaque-fundo: color-mix(in srgb, #ff7440 14%, transparent);

    /* ── Aliases: manter compatibilidade com app.css ─────────────── */
    --ws-bg:            #f4f6fb;
    --ws-border:        #dde5f3;
    --ws-surface:       #ffffff;
    --ws-text:          #152341;
    --ws-muted:         #65738a;
    --ws-radius:        10px;
    --ws-shadow:        0px 1px 4px 0px rgba(130, 143, 163, 0.15);
}

:root[data-theme="dark"] {
    /* ── Surfaces ───────────────────────────────────────────────── */
    --sigo-bg:          #0f1420;
    --sigo-surface:     #171d2b;
    --sigo-border:      #2a3142;

    /* ── Typography ─────────────────────────────────────────────── */
    --sigo-text:        #e8ecf5;
    --sigo-text-body:   #c3cadb;
    --sigo-muted:       #8b96ab;
    --sigo-muted-light: #7e89a1;  /* era #6b7690 (3,70:1) → 4,80:1 */

    /* ── Interactive ─────────────────────────────────────────────── */
    --sigo-hover-bg:    rgba(47, 211, 255, 0.08);
    --sigo-focus-ring:  0 0 0 3px rgba(47, 211, 255, 0.28);

    /* ── Shadows ─────────────────────────────────────────────────── */
    --sigo-shadow:      0px 1px 4px 0px rgba(0, 0, 0, 0.45);
    --sigo-shadow-lg:   0 4px 12px rgba(0, 0, 0, 0.55);

    /* ── Tons de indicador — passos próprios do tema escuro (não inversão automática) ── */
    --sigo-tom-neutro:        #8b96ab;  --sigo-tom-neutro-tinta:  #e8ecf5;
    --sigo-tom-marca:         #3987e5;  --sigo-tom-marca-tinta:   #86b6ef;
    --sigo-tom-bom:           #0ca30c;  --sigo-tom-bom-tinta:     #5fd35f;
    --sigo-tom-atencao:       #fab219;  --sigo-tom-atencao-tinta: #fac85a;
    --sigo-tom-critico:       #d03b3b;  --sigo-tom-critico-tinta: #f08080;
    --sigo-tom-info:          #22d3ee;  --sigo-tom-info-tinta:    #67e8f9;

    /* ── Marca/links sem par escuro até 2026-10-12 ─────────────────
       --sigo-navy segue fixo (é fundo de marca); como TEXTO use --sigo-accent-ink. */
    --sigo-link:        #5ec8ff;  /* 8,97:1 na superfície escura */
    --sigo-icon-grad:   linear-gradient(135deg, #2a5298 0%, #3d6bc7 100%);

    /* ══ CAMADA SEMÂNTICA — valores do tema escuro ══════════════════ */
    --sigo-accent-ink:     #2fd3ff;                     /* 9,5:1 na superfície */
    --sigo-selected-bg:    rgba(47, 211, 255, 0.10);
    /* Navy (#152341) sobre a superfície escura tinha 1,08:1 — o botão principal
       "sumia". #3d6bc7: 3,31:1 de forma, 5,09:1 com texto branco. */
    --sigo-cta-bg:         #3d6bc7;
    --sigo-cta-fg:         #ffffff;
    --sigo-secundaria:     #818cf8;                     /* 5,65:1 na superfície */
    --sigo-secundaria-fg:  #0f1420;                     /* 6,17:1 */
    --sigo-destaque:       #ff8a5c;
    --sigo-destaque-tinta: #ff8a5c;                     /* 7,25:1 */
    --sigo-destaque-fundo: color-mix(in srgb, #ff7440 18%, transparent);

    /* ── Aliases: manter compatibilidade com app.css ─────────────── */
    --ws-bg:            #0f1420;
    --ws-border:        #2a3142;
    --ws-surface:       #171d2b;
    --ws-text:          #e8ecf5;
    --ws-muted:         #8b96ab;
    --ws-shadow:        0px 1px 4px 0px rgba(0, 0, 0, 0.45);
}