/* ==========================================================================
   Tokens — Painel de Economia & ROI
   Fonte: Docs/DESIGN-SYSTEM.md (Setor de Dados GRC), secao 9 "Tokens prontos".
   --matiz: 220 (navy do DataHub, escolhido para manter a familia visual do
   setor — DataHub/APPHUB, Escala, Nubus, ver secao 1 do guia).

   Os nomes de variavel abaixo (--surface-1, --page, --accent, etc.) sao os
   que o app ja usava (herdados do prototipo); os VALORES agora seguem as
   formulas/valores de referencia do guia para matiz 220, entao trocar de
   design system no futuro e so reescrever este arquivo — nenhum outro
   arquivo referencia uma cor literal.

   Correspondencia com os nomes canonicos do guia (secao 9), para quem for
   comparar com outro app da familia:
     --surface-1 = --superficie   --page       = --fundo
     --text-primary = --texto     --text-secondary/--text-muted = --texto-2
     --border/--grid = --borda    --accent     = --base-2 (claro) / --acento (escuro)
     --status-good = --ok   --status-warning = --alerta   --status-serious = --erro
   ========================================================================== */
:root {
  color-scheme: light;

  /* -------- o unico botao de ajuste da familia (secao 9.0 do guia) -------- */
  --matiz: 220;

  /* -------- superficies e texto (claro) — valores de referencia do DataHub, secao 1.1 -------- */
  --surface-1: #ffffff;              /* --superficie */
  --page: #f4f6f9;                   /* --fundo */
  --text-primary: #16233f;           /* --texto */
  --text-secondary: #334155;         /* slate-700 — corpo/legenda com hierarquia mais forte */
  --text-muted: #475569;             /* slate-600 — o guia corrigiu slate-500 -> slate-600 aqui (secao 11.1.1: 500 reprova AA sobre o fundo claro, 4,40 contra o minimo 4,5) */
  --grid: #e2e8f0;                   /* --borda / hairline (slate-200), divisorias de tabela */
  --baseline: #cbd5e1;                /* slate-300, um tom mais visivel para eixos de grafico e bordas de input */
  --border: #e2e8f0;                 /* --borda — bordas de card/botao/input */

  /* -------- acao primaria e acento (claro) — secao 1.1: base/acao/acento do DataHub -------- */
  --accent: #1c3a6e;                 /* --base-2, "acao primaria" — botoes, foco, aba ativa */
  --accent-ink: #ffffff;             /* cor do texto SOBRE --accent */
  --accent-firm: #3f618f;            /* variante do acento com 6,3:1 sobre branco — para texto/links, nunca preenchimento grande */
  --series-1: #3f618f;               /* barras "realizada" dos graficos — usa a variante firme (mais visivel que o navy escuro em area de conteudo) */
  --series-1-wash: hsl(220 59% 27% / 0.08); /* wash geral de hover/selecao, derivado de --accent */
  --series-2: #d97706;               /* reserva p/ 2a serie futura — reaproveita --alerta, nunca cor nova */
  --series-3: #16a34a;               /* reserva p/ 3a serie futura — reaproveita --ok */
  --deemph: #94a3b8;                 /* slate-400 — barras "potencial", cinza sem carga semantica */

  /* -------- semanticas (fixo na secao 1.3/1.5 do guia — iguais em claro e escuro) -------- */
  --good-text: #16a34a;              /* --ok */
  --status-good: #16a34a;            /* --ok — status "Automatizado" / investimento "Pago" */
  --status-warning: #d97706;         /* --alerta — status "Em andamento" / investimento "Pendente" */
  --status-serious: #dc2626;         /* --erro — mensagens de erro e saldo negativo */

  /* -------- forma e profundidade (secao 4 do guia) -------- */
  --raio-s: 10px;                    /* botao-icone, chip, badge */
  --raio-m: 12px;                    /* input, botao, alerta */
  --raio-l: 16px;                    /* card, painel, modal */
  --card-shadow: 0 10px 30px hsl(220 60% 15% / .10); /* --sombra-card */
  --shadow-hover: 0 24px 50px -12px hsl(220 57% 18% / .28); /* --sombra-hover, elevacao/modal */
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    /* -------- superficies escuras derivadas do matiz, nunca preto puro (secao 1.4) -------- */
    --surface-1: #0f1d3a;            /* ink-card */
    --page: #0a1428;                 /* ink-fundo */
    --text-primary: hsl(220 30% 92%);
    --text-secondary: hsl(220 18% 72%);
    --text-muted: hsl(220 14% 58%);
    --grid: #213655;                 /* ink-borda */
    --baseline: hsl(220 44% 30%);
    --border: #213655;               /* ink-borda */

    /* -------- no escuro o ACENTO assume o papel de destaque (secao 1.4) -------- */
    --accent: #9db8dc;                /* "Aco sereno" — o mesmo acento do DataHub */
    --accent-ink: #0a1428;            /* texto escuro sobre o acento claro — nunca branco aqui */
    --accent-firm: #9db8dc;
    --series-1: #9db8dc;
    --series-1-wash: hsl(214 47% 74% / 0.14);
    --series-2: #fbbf24;              /* amber-400 — par escuro de --alerta (secao 1.5) */
    --series-3: #4ade80;              /* green-400 — par escuro de --ok (secao 1.5) */
    --deemph: hsl(220 15% 42%);

    --good-text: #4ade80;             /* green-400 — 10,54:1 sobre ink-900, medido na secao 1.5 do guia */
    --status-good: #4ade80;
    --status-warning: #fbbf24;
    --status-serious: #f87171;        /* red-400 — equivalente escuro de --erro */

    --card-shadow: none;              /* sombra nao le bem sobre superficie escura; a separacao vem do hairline */
    --shadow-hover: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #0f1d3a;
  --page: #0a1428;
  --text-primary: hsl(220 30% 92%);
  --text-secondary: hsl(220 18% 72%);
  --text-muted: hsl(220 14% 58%);
  --grid: #213655;
  --baseline: hsl(220 44% 30%);
  --border: #213655;
  --accent: #9db8dc;
  --accent-ink: #0a1428;
  --accent-firm: #9db8dc;
  --series-1: #9db8dc;
  --series-1-wash: hsl(214 47% 74% / 0.14);
  --series-2: #fbbf24;
  --series-3: #4ade80;
  --deemph: hsl(220 15% 42%);
  --good-text: #4ade80;
  --status-good: #4ade80;
  --status-warning: #fbbf24;
  --status-serious: #f87171;
  --card-shadow: none;
  --shadow-hover: none;
}