/* 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);
}