/* DASH-TAG — Design tokens v0.1.0 (2026-07-28)
 * Palette validado com scripts/validate_palette.js (skill dataviz). NÃO editar hex sem re-rodar o validador.
 * Marca: #2C2AAA (indigo). Como o brand puro fica FORA da faixa de luminosidade para série em fundo claro
 * (OKLCH L 0.389 < 0.43), a série usa o step #4a45c8 do MESMO hue; #2C2AAA permanece na UI (botões, links, header).
 */

:root, .dt-root {
  color-scheme: light;

  /* superfícies e tinta */
  --surface-1: #fcfcfb;          /* superfície de gráfico */
  --surface-page: #f9f9f7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-tertiary: #6e6c67;      /* TEXTO recessivo — 4,55:1, passa AA */
  --text-muted: #898781;         /* SOMENTE eixos/ticks em SVG (3,50:1 — NÃO usar em texto corrido) */
  --gridline: #e1e0d9;
  --axis: #c3c2b7;
  --border-hairline: rgba(11, 11, 11, .10);

  /* marca */
  --brand: #2C2AAA;              /* UI: botões, links, header — NÃO usar como série em fundo claro */
  --brand-ink: #ffffff;

  /* categórico — 6 slots, ordem FIXA, nunca ciclada (máx. 6 séries por gráfico)
     light: adjacente CVD ΔE 9.1 · normal 19.6 · faixa L e chroma OK
     all-pairs (dispersão/bolha): só os 3 primeiros slots são válidos — além disso, agrupar em "Outros" ou facetar */
  --series-1: #4a45c8;           /* indigo (marca) */
  --series-2: #eb6834;           /* laranja */
  --series-3: #1baf7a;           /* aqua */
  --series-4: #eda100;           /* amarelo */
  --series-5: #e87ba4;           /* magenta */
  --series-6: #008300;           /* verde */

  /* categoria reservada: NÃO ATRIBUÍDO — cinza, sempre visível, nunca escondido */
  --unattributed: #898781;
  --comparison: #c3c2b7;         /* trilha/fundo do período de comparação — NÃO carrega dado */
  --comparison-ink: #8d8b80;     /* série de comparação com DADO (≥3:1); recessiva por dash, não por contraste */

  /* status — PREENCHIMENTO, fixo, nunca tematizado; SEMPRE com ícone + rótulo, nunca cor sozinha */
  --status-good: #0ca30c;        /* ganho */
  --status-warning: #fab219;     /* atenção */
  --status-serious: #ec835a;     /* preenchimento apenas — 2,57:1, NÃO usar como tinta */
  --status-critical: #d03b3b;    /* perda */
  --status-serious-ink: #a8441a; /* versão TINTA do serious (4,6:1) */

  /* tinta de variação — TEMATIZADA, ≥4,5:1 nos dois temas (não confundir com status) */
  --delta-up: #006300;
  --delta-down: #d03b3b;

  /* sequencial (heatmap hora × dia) — um hue, claro→escuro */
  --seq-100: #e3e2f9; --seq-200: #c9c7f2; --seq-300: #a9a5ea;
  --seq-400: #8a84f0; --seq-500: #6f68e0; --seq-600: #4a45c8; --seq-700: #332f9e;

  /* ordinal (etapas do funil) — validado --ordinal: monotônico, gaps ≥ .06, extremo claro ≥ 2:1 */
  --ord-1: #a9a5ea; --ord-2: #8a84f0; --ord-3: #6f68e0;
  --ord-4: #4a45c8; --ord-5: #332f9e; --ord-6: #22206e;

  /* divergente (pacing acima/abaixo da meta) — dois hues + cinza neutro no meio */
  --div-neg: #d03b3b; --div-mid: #f0efec; --div-pos: #4a45c8;

  /* tipografia e numerais */
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --num-tabular: tabular-nums;   /* colunas e eixos; hero number usa proporcional */

  /* espaçamento e forma */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px;
  --mark-end-radius: 4px;        /* topo da barra; base ancorada na linha zero */
  --mark-gap: 2px;               /* respiro da superfície entre fatias/barras */
  --line-w: 2px; --marker-min: 8px;
  --shadow-card: 0 1px 2px rgba(11, 11, 11, .06);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])), :root:where(:not([data-theme="light"])) .dt-root {
    color-scheme: dark;
    --surface-1: #1a1a19;
    --surface-page: #0d0d0d;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-tertiary: #a5a399;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --axis: #383835;
    --border-hairline: rgba(255, 255, 255, .10);

    --brand: #6f68e0;
    --brand-ink: #0d0d0d;

    /* dark: adjacente CVD ΔE 8.4 · normal 19.3 · todos ≥ 3:1 na superfície escura */
    --series-1: #6f68e0; --series-2: #d95926; --series-3: #199e70;
    --series-4: #c98500; --series-5: #d55181; --series-6: #008300;

    --unattributed: #898781;
    --comparison: #383835;
    --comparison-ink: #6b6a63;
    --status-serious-ink: #f0a07a;
    --delta-up: #0ca30c;
    --delta-down: #f06a6a;

    --seq-100: #332f9e; --seq-200: #4a45c8; --seq-300: #5651d2;
    --seq-400: #6f68e0; --seq-500: #8a84f0; --seq-600: #a9a5ea; --seq-700: #c9c7f2;

    --ord-1: #5651d2; --ord-2: #6f68e0; --ord-3: #8a84f0;
    --ord-4: #a9a5ea; --ord-5: #c9c7f2; --ord-6: #e3e2f9;

    --div-neg: #d03b3b; --div-mid: #383835; --div-pos: #6f68e0;
    --shadow-card: none;
  }
}

:root[data-theme="dark"], :root[data-theme="dark"] .dt-root {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --surface-page: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-tertiary: #a5a399;
  --text-muted: #898781;
  --gridline: #2c2c2a;
  --axis: #383835;
  --border-hairline: rgba(255, 255, 255, .10);

  --brand: #6f68e0;
  --brand-ink: #0d0d0d;

  --series-1: #6f68e0; --series-2: #d95926; --series-3: #199e70;
  --series-4: #c98500; --series-5: #d55181; --series-6: #008300;

  --unattributed: #898781;
  --comparison: #383835;
  --comparison-ink: #6b6a63;
  --status-serious-ink: #f0a07a;
  --delta-up: #0ca30c;
  --delta-down: #f06a6a;

  --seq-100: #332f9e; --seq-200: #4a45c8; --seq-300: #5651d2;
  --seq-400: #6f68e0; --seq-500: #8a84f0; --seq-600: #a9a5ea; --seq-700: #c9c7f2;

  --ord-1: #5651d2; --ord-2: #6f68e0; --ord-3: #8a84f0;
  --ord-4: #a9a5ea; --ord-5: #c9c7f2; --ord-6: #e3e2f9;

  --div-neg: #d03b3b; --div-mid: #383835; --div-pos: #6f68e0;
  --shadow-card: none;
}

/* Alívio obrigatório (regra do validador): em fundo claro, aqua/amarelo/magenta ficam abaixo de 3:1.
   Todo gráfico que use series-3/4/5 precisa de rótulo direto visível OU do botão "ver como tabela". */