/* ============================================================================
   SellmaxAZ — Design Tokens (TAREFA-010, primeira implementação real)
   Fonte: DESIGN.md §1-3 (raiz da pasta de planejamento). Todo valor visual vem daqui —
   nenhuma cor/tamanho hardcoded em template/CSS de componente.
   ============================================================================ */

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

:root {
  /* ---------- Marca — o ÚNICO destaque do sistema (DESIGN.md §1/§6) ---------- */
  --brand:      light-dark(#2b4fd8, #7d97ff);
  --brand-text: light-dark(#1f3cae, #93a9ff);
  --brand-soft: light-dark(#eef1fd, rgba(125,151,255,.13));

  /* ---------- Superfícies ---------- */
  --canvas:    light-dark(#f6f7f9, #0b0d12);
  --surface:   light-dark(#ffffff, #131722);
  --surface-2: light-dark(#fafbfc, #171c28);
  /* achado real da reauditoria 15/08: topbar usava var(--ink) (cor de TEXTO, que gira com o
     tema) como background — funcionava por coincidência no claro (ink claro = quase preto) e
     quebrava no escuro (ink escuro = quase branco). Mock (ERP Screens/assets/base.css) usa um
     token DEDICADO pra isso (--bg-inverse), sempre escuro, não gira — mesmo valor já aprovado
     do --ink claro, só fixo. */
  --surface-inverse: #101319;
  --bg-hover:  light-dark(#f1f2f5, rgba(255,255,255,.05));
  --bg-selected: var(--brand-soft);
  --bg-backdrop: light-dark(rgba(15,18,25,.48), rgba(3,5,9,.66));
  --grid-line: light-dark(rgba(10,14,20,.028), rgba(255,255,255,.026));

  /* ---------- Texto ---------- */
  --ink:   light-dark(#101319, #eceef4);   /* primário e TODO valor financeiro */
  --ink-2: light-dark(#5b6472, #a7aebb);   /* secundário: rótulos, meta */
  --ink-3: light-dark(#8b93a1, #6b7280);   /* REGRA DURA (§7): nunca em texto de corpo */
  --text-on-brand: #ffffff;

  /* ---------- Bordas ---------- */
  --line:   light-dark(#e2e5ec, #252b38);
  --line-2: light-dark(#cfd4de, #333b4c);

  /* ---------- Semânticas — sempre com ícone+texto, nunca cor sozinha ---------- */
  --success:    light-dark(#177245, #4ade80);
  --success-bg: light-dark(#e9f7ef, rgba(74,222,128,.12));
  --warning:    light-dark(#8a5a00, #fbbf24);
  --warning-bg: light-dark(#fdf4e0, rgba(251,191,36,.12));
  --danger:     light-dark(#b3261e, #f87171);
  --danger-bg:  light-dark(#fdecea, rgba(248,113,113,.12));
  --info:       var(--brand-text);   /* info = família do cobalto (§7), nunca um 2º azul */
  --info-bg:    var(--brand-soft);

  --focus-ring: 0 0 0 3px light-dark(rgba(43,79,216,.28), rgba(125,151,255,.35));

  --shadow-sm: light-dark(0 1px 3px rgba(15,18,25,.08), 0 1px 3px rgba(0,0,0,.5));
  --shadow-md: light-dark(0 4px 12px rgba(15,18,25,.10), 0 4px 12px rgba(0,0,0,.55));
  --shadow-lg: light-dark(0 12px 28px rgba(15,18,25,.14), 0 12px 28px rgba(0,0,0,.6));

  /* ---------- Tipografia (§2) ---------- */
  --font-sans: 'Space Grotesk', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-h1: 700 28px/1.2 var(--font-sans);
  --text-h2: 600 22px/1.3 var(--font-sans);
  --text-h3: 600 17px/1.3 var(--font-sans);
  --text-body-lg: 400 16px/1.55 var(--font-sans);
  --text-body: 400 15px/1.55 var(--font-sans);
  --text-small: 400 13px/1.5 var(--font-sans);
  --text-eyebrow: 600 12px/1.4 var(--font-sans);
  --text-data: 500 14px/1.4 var(--font-mono);
  --text-data-sm: 400 12.5px/1.4 var(--font-mono);

  /* ---------- Forma & espaço (§3) ---------- */
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-pill: 999px;
  --border-width: 1px;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --container-max: 1440px; --container-content: 1200px; --container-narrow: 720px;

  --duration-fast: 120ms; --duration-base: 200ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);

  --z-sticky: 100; --z-topbar: 200; --z-dropdown: 300; --z-drawer: 400; --z-modal: 500; --z-toast: 600;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; }
}