/* ds/tokens.css — o ÚNICO lugar dos tokens do design system (#321).
   ───────────────────────────────────────────────────────────────────────────
   DOIS EIXOS, independentes, os dois no <html>:

     data-theme = light | dark | (ausente = segue o sistema)   → CLARO/ESCURO
     data-skin  = classico | agi | tenant | (ausente = classico) → IDENTIDADE

   O claro/escuro continua sendo o da F0.1 (web/styles.css + web/tema.js). O
   skin é o eixo novo: troca a IDENTIDADE (paleta, tipografia, textura) sem
   mexer em nenhuma tela. Toda tela já pinta com var(--bg), var(--panel),
   var(--ink)…; o skin só redefine essas variáveis.

   Três fontes de skin, nesta precedência (web/skin.js):
     1. tenant  → o tema do CLIENTE, lido de cdp.tenant_temas em runtime (Host
                  do domínio whitelabel, ou o portal do cliente). Entra como
                  style inline no <html>: vence tudo, nunca hardcode.
     2. escolha → toggle "Tema clássico / Tema AGI" na sidebar (localStorage).
     3. classico → o que estava no ar. Se este arquivo não carregar, nada muda.

   O clássico e o AGI são só os dois primeiros casos do mecanismo de temas:
   um tema de cliente é um conjunto de valores para as MESMAS variáveis.

   Regra: tela nova usa var(--ds-*) e os componentes de front/ds.jsx. Cor
   literal em CSS de tela é bug (docs/design-system.md).
   ─────────────────────────────────────────────────────────────────────────── */

/* ── ESCALA · vale em todo skin ──────────────────────────────────────────── */
:root {
  /* espaçamento, grade de 4 px */
  --ds-s1: 4px;
  --ds-s2: 8px;
  --ds-s3: 12px;
  --ds-s4: 16px;
  --ds-s5: 20px;
  --ds-s6: 24px;
  --ds-s8: 32px;

  /* raios */
  --ds-r-sm: 6px;
  --ds-r: 10px;
  --ds-r-lg: var(--radius, 14px);
  --ds-r-pill: 999px;

  /* tipografia */
  --ds-font: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ds-fs-xs: 11px;
  --ds-fs-sm: 12px;
  --ds-fs: 13px;
  --ds-fs-md: 14px;
  --ds-fs-lg: 16px;
  --ds-fs-xl: 20px;
  --ds-fs-kpi: 28px;
  --ds-kpi-weight: 900;
  --ds-label-case: none;
  --ds-label-track: 0;

  /* movimento: curto, e some com prefers-reduced-motion (ds.css) */
  --ds-dur-fast: 120ms;
  --ds-dur: 200ms;
  --ds-dur-slow: 1.6s;
  --ds-ease: cubic-bezier(.2, .7, .2, 1);

  /* sombras */
  --ds-shadow-1: 0 1px 0 rgba(0, 0, 0, .25);
  --ds-shadow-2: var(--shadow);
  --ds-glow: none;

  /* semântica — apontam para a paleta do tema claro/escuro vigente */
  --ds-accent: var(--orange);
  --ds-accent-ink: var(--ink-accent);
  --ds-ok: var(--green);
  --ds-warn: var(--yellow);
  --ds-err: var(--red);
  --ds-info: var(--blue);
  --ds-none: var(--muted-2);

  /* dataviz: série principal = accent; comparação = neutro */
  --ds-chart-1: var(--orange);
  --ds-chart-2: var(--blue);
  --ds-chart-3: var(--yellow);
  --ds-chart-4: var(--green);
  --ds-chart-grid: var(--line-soft);
  --ds-chart-axis: var(--muted-2);

  /* textura de fundo e pontos do logo (o clássico não tem textura) */
  --ds-grid-line: transparent;
  --ds-grid-size: 24px;
  --ds-dot: var(--orange);
  --ds-dot-2: var(--muted-2);

  /* marca (o tenant troca) */
  --ds-logo-url: none;
}

/* ── SKIN AGI · dark-first, sala de controle ─────────────────────────────── */
/* Frio no fundo, laranja AIAB só onde há ação/sinal. Todos os pares de texto
   foram medidos contra --bg/--panel/--panel-2 (tests/test_design_system.py
   falha abaixo de 4,5:1). */
:root[data-skin="agi"] {
  --bg: #07090D;
  --panel: #0C1017;
  --panel-2: #111722;
  --line: #1D2633;
  --line-soft: #151C27;

  --ink: #E6EDF5;
  --muted: #8C9AAD;
  --muted-2: #7F8DA1;

  --orange: #FF6A00;
  --yellow: #FFC400;
  --green: #2FD27A;
  --blue: #38BDF8;
  --red: #FF5A5A;

  --ink-accent: #FF7A1A;
  --ink-warn: #FFC400;
  --ink-ok: #2FD27A;
  --ink-info: #38BDF8;
  --ink-err: #FF6A6A;

  --on-accent: #120A00;

  --overlay: rgba(2, 4, 8, .62);
  --sidebar-bg: rgba(12, 16, 23, .72);
  --tag-bg: rgba(56, 189, 248, .05);
  --glow-1: rgba(255, 106, 0, .08);
  --glow-2: rgba(56, 189, 248, .06);
  --shadow: 0 10px 34px rgba(0, 0, 0, .55);
  --drawer-shadow: -18px 0 50px rgba(0, 0, 0, .6);

  --radius: 10px;

  --ds-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-kpi-weight: 600;
  --ds-label-case: uppercase;
  --ds-label-track: .08em;
  --ds-glow: 0 0 0 1px rgba(56, 189, 248, .06), 0 0 24px rgba(255, 106, 0, .06);
  --ds-grid-line: rgba(56, 189, 248, .045);
  --ds-dot: #FF6A00;
  --ds-dot-2: #3B82A6;
  --ds-chart-2: #38BDF8;
}

/* AGI no claro: mesma identidade, papel em vez de tela. O bloco e o do @media
   abaixo são IGUAIS de propósito (um para a escolha explícita, outro para o
   automático) — tests/test_design_system.py compara os dois. */
:root[data-skin="agi"][data-theme="light"] {
  --bg: #F3F6FA;
  --panel: #FFFFFF;
  --panel-2: #E9EEF4;
  --line: #D3DBE5;
  --line-soft: #E3E9F0;

  --ink: #0E1520;
  --muted: #4E5B6C;
  --muted-2: #58667A;

  --green: #1FA463;
  --blue: #0EA5E9;
  --red: #E03131;

  --ink-accent: #AD4800;
  --ink-warn: #7E6100;
  --ink-ok: #13733F;
  --ink-info: #075E8A;
  --ink-err: #C0392B;

  --overlay: rgba(14, 21, 32, .38);
  --sidebar-bg: rgba(255, 255, 255, .78);
  --tag-bg: rgba(14, 21, 32, .045);
  --shadow: 0 8px 26px rgba(14, 21, 32, .12);
  --drawer-shadow: -18px 0 50px rgba(14, 21, 32, .16);

  --ds-glow: 0 0 0 1px rgba(14, 21, 32, .04);
  --ds-grid-line: rgba(14, 21, 32, .045);
  --ds-dot-2: #8FA3B8;
  --ds-chart-2: #0EA5E9;
}

@media (prefers-color-scheme: light) {
  :root[data-skin="agi"]:not([data-theme="dark"]) {
    --bg: #F3F6FA;
    --panel: #FFFFFF;
    --panel-2: #E9EEF4;
    --line: #D3DBE5;
    --line-soft: #E3E9F0;

    --ink: #0E1520;
    --muted: #4E5B6C;
    --muted-2: #58667A;

    --green: #1FA463;
    --blue: #0EA5E9;
    --red: #E03131;

    --ink-accent: #AD4800;
    --ink-warn: #7E6100;
    --ink-ok: #13733F;
    --ink-info: #075E8A;
    --ink-err: #C0392B;

    --overlay: rgba(14, 21, 32, .38);
    --sidebar-bg: rgba(255, 255, 255, .78);
    --tag-bg: rgba(14, 21, 32, .045);
    --shadow: 0 8px 26px rgba(14, 21, 32, .12);
    --drawer-shadow: -18px 0 50px rgba(14, 21, 32, .16);

    --ds-glow: 0 0 0 1px rgba(14, 21, 32, .04);
    --ds-grid-line: rgba(14, 21, 32, .045);
    --ds-dot-2: #8FA3B8;
    --ds-chart-2: #0EA5E9;
  }
}

/* ── SKIN TENANT ─────────────────────────────────────────────────────────────
   Não tem valores aqui, de propósito: eles chegam de cdp.tenant_temas via
   web/skin.js, como style inline no <html>. Este seletor só liga a textura
   quando o tema do cliente pede o fundo "agi" (base = agi). */
:root[data-skin="tenant"][data-skin-base="agi"] {
  --ds-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ds-kpi-weight: 600;
  --ds-label-case: uppercase;
  --ds-label-track: .08em;
  --ds-grid-line: rgba(127, 141, 161, .05);
}

/* ── 4 TEMAS DA MARCA AIAB (#123 · referências do Vegas 24/10) ──────────────
   "Um sistema, quatro temas" (docs/ds/referencias-vegas-2410/08): Mineral,
   Graphite, Contrast e Paper. São skins como o clássico e o AGI — redefinem
   as MESMAS variáveis, nenhuma tela muda. Cada um tem modo FIXO (Graphite é
   escuro; os outros três são claros): ignoram o data-theme, por isso trazem
   color-scheme. Urbanist em todos; laranja AIAB #FF6A00 (Graphite usa a
   primária #FF9A00 da referência). Texto passa AA: tests/test_design_system.py. */
:root[data-skin="mineral"] {
  color-scheme: light;
  --bg: #F8F7F5;
  --panel: #FFFFFF;
  --panel-2: #F1EFEC;
  --line: #E4E1DC;
  --line-soft: #EEEBE7;
  --ink: #1A1A1A;
  --muted: #5C5A57;
  --muted-2: #66635F;
  --sidebar-bg: #FFFFFF;
  --tag-bg: rgba(26, 26, 26, .035);
  --orange: #FF6A00;
  --yellow: #FFC400;
  --green: #1FA463;
  --blue: #2563EB;
  --red: #E03131;
  --ink-accent: #AD4800;
  --ink-warn: #7E6100;
  --ink-ok: #13733F;
  --ink-info: #1D4ED8;
  --ink-err: #C0392B;
  --on-accent: #120A00;
  --overlay: rgba(26, 26, 26, .38);
  --shadow: 0 8px 26px rgba(26, 26, 26, .10);
  --drawer-shadow: -18px 0 50px rgba(26, 26, 26, .14);
  --glow-1: rgba(255, 106, 0, .06);
  --glow-2: rgba(255, 196, 0, .05);
  --radius: 12px;
  --ds-chart-2: #1A1A1A;
  --ds-dot-2: #B5B0A8;
  --ds-grid-line: transparent;
  --ds-glow: none;
}

:root[data-skin="graphite"] {
  color-scheme: dark;
  --bg: #0B1118;
  --panel: #151F2A;
  --panel-2: #1B2733;
  --line: #2A3744;
  --line-soft: #1F2B37;
  --ink: #F4F6F8;
  --muted: #9CA3AF;
  --muted-2: #939BA7;
  --orange: #FF9A00;
  --yellow: #FFC400;
  --green: #2FD27A;
  --blue: #60A5FA;
  --red: #FF5A5A;
  --ink-accent: #FFA733;
  --ink-warn: #FFC400;
  --ink-ok: #2FD27A;
  --ink-info: #7DB6FB;
  --ink-err: #FF7A7A;
  --on-accent: #120A00;
  --overlay: rgba(4, 8, 12, .62);
  --sidebar-bg: #0F1720;
  --tag-bg: rgba(244, 246, 248, .04);
  --glow-1: rgba(255, 154, 0, .08);
  --glow-2: rgba(96, 165, 250, .05);
  --shadow: 0 10px 34px rgba(0, 0, 0, .5);
  --drawer-shadow: -18px 0 50px rgba(0, 0, 0, .55);
  --radius: 12px;
  --ds-chart-2: #6B7785;
  --ds-dot-2: #3A4856;
  --ds-grid-line: transparent;
  --ds-glow: none;
}

:root[data-skin="contrast"] {
  color-scheme: light;
  --bg: #F4F4F4;
  --panel: #FFFFFF;
  --panel-2: #EBEBEB;
  --line: #D4D4D4;
  --line-soft: #E4E4E4;
  --ink: #0A0A0A;
  --muted: #404040;
  --muted-2: #4A4A4A;
  --sidebar-bg: #0A0A0A;
  --tag-bg: rgba(10, 10, 10, .04);
  --orange: #FF6A00;
  --yellow: #FFC400;
  --green: #1FA463;
  --blue: #2563EB;
  --red: #E03131;
  --ink-accent: #AD4800;
  --ink-warn: #7E6100;
  --ink-ok: #13733F;
  --ink-info: #1D4ED8;
  --ink-err: #C0392B;
  --on-accent: #120A00;
  --overlay: rgba(26, 26, 26, .38);
  --shadow: 0 8px 26px rgba(26, 26, 26, .10);
  --drawer-shadow: -18px 0 50px rgba(26, 26, 26, .14);
  --glow-1: rgba(255, 106, 0, .06);
  --glow-2: rgba(255, 196, 0, .05);
  --radius: 12px;
  --ds-chart-2: #1A1A1A;
  --ds-dot-2: #B5B0A8;
  --ds-grid-line: transparent;
  --ds-glow: none;
}

/* Contrast: a sidebar é preta sobre fundo claro. As variáveis são
   redefinidas DENTRO dela, então side-item, título e marca repintam sozinhos. */
:root[data-skin="contrast"] .sidebar {
  --ink: #FFFFFF;
  --muted: #C8C8C8;
  --muted-2: #A8A8A8;
  --panel-2: #1F1F1F;
  --line: #333333;
  --line-soft: #1A1A1A;
  --ink-accent: #FF8A33;
  color: var(--ink);
}

:root[data-skin="paper"] {
  color-scheme: light;
  --bg: #FBFAF7;
  --panel: #FFFFFF;
  --panel-2: #F4F2ED;
  --line: #E8E4DC;
  --line-soft: #F0EDE7;
  --ink: #1A1A1A;
  --muted: #5A5650;
  --muted-2: #64605A;
  --sidebar-bg: #FBFAF7;
  --tag-bg: rgba(26, 26, 26, .03);
  --orange: #FF6A00;
  --yellow: #FFC400;
  --green: #1FA463;
  --blue: #2563EB;
  --red: #E03131;
  --ink-accent: #AD4800;
  --ink-warn: #7E6100;
  --ink-ok: #13733F;
  --ink-info: #1D4ED8;
  --ink-err: #C0392B;
  --on-accent: #120A00;
  --overlay: rgba(26, 26, 26, .38);
  --shadow: none;
  --drawer-shadow: -18px 0 50px rgba(26, 26, 26, .14);
  --glow-1: rgba(255, 106, 0, .06);
  --glow-2: rgba(255, 196, 0, .05);
  --radius: 10px;
  --ds-chart-2: #1A1A1A;
  --ds-dot-2: #B5B0A8;
  --ds-grid-line: transparent;
  --ds-glow: none;
}