/* ═══════════════════════════════════════════════════════════════════════
   AXIS DESIGN SYSTEM — CONTRATO DE TOKENS (fonte única de verdade)
   ---------------------------------------------------------------------------
   Este arquivo é a ORIGEM CANÔNICA dos tokens visuais do AXIS. Ele é
   vendorizado (cópia idêntica) para cada app do ecossistema:
     · avbn_flask/app/static/css/axis-tokens.css      (AXIS interno / Cockpit)
     · portal_fornecedor/app/static/css/axis-tokens.css (AXIS Portal do Fornecedor)
   Master: design-system/axis-tokens.css — edite AQUI e re-vendorize. Nunca
   edite as cópias diretamente.

   Decisões oficiais (2026-08-10):
     · Acento DUAL por tema — #0E9FB8 (claro) / #22C7E0 (escuro).
     · Emerald #2DD4A0 APOSENTADO (drift antigo do Portal).
   Tipografia: Space Grotesk (display) · Inter (UI) · JetBrains Mono (dados).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── TIPOGRAFIA ─────────────────────────────────────────────────────── */
  --font-display:'Space Grotesk','Segoe UI Variable Display','Segoe UI',system-ui,sans-serif;
  --font-ui:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  /* aliases legados (Portal usa --disp/--ui/--mono) */
  --disp:var(--font-display); --ui:var(--font-ui); --mono:var(--font-mono);

  /* ── MARCA ──────────────────────────────────────────────────────────── */
  --ax-navy:#1A3260; --ax-navy-deep:#0A1A33; --ax-navy-light:#2A4480; --ax-steel:#24466E;
  --ax-signal:#EFA13C;                    /* âmbar-identidade: alerta/pendência */
  /* aliases legados de marca (Portal) */
  --navy:var(--ax-navy); --navy-1:#122A4C; --navy-2:#0F2244; --ink0:var(--ax-navy-deep);
  --steel:var(--ax-steel); --slate:#61789C; --mist:#9FB3D1;

  /* ── ACENTO — DUAL claro/escuro (redefinido no tema escuro) ─────────── */
  --ax-accent:#0E9FB8; --ax-accent-strong:#0B8299; --ax-accent-soft:#d4eef4; --ax-accent-ink:#042027;
  --ax-accent-on-dark:#22C7E0;            /* constante: teal brilhante p/ chrome sempre-escuro */
  /* aliases legados (Portal usa --teal/--teal-2/--teal-3/--teal-ink) */
  --teal:var(--ax-accent); --teal-2:#15B4D6; --teal-3:var(--ax-accent-strong); --teal-ink:#052A33;
  --teal-bright:var(--ax-accent-on-dark);

  /* ── SUPERFÍCIES & TINTA (claro) ───────────────────────────────────── */
  --bg:#EEF1F6; --surface:#FFFFFF; --surface-2:#F5F7FB; --surface-3:#EDF1F8;
  --border:#E6EAF1; --border-strong:#D4DAE6;
  --t1:#0F1E36; --t2:#3A4A63; --t3:#6B7890; --t4:#616F88;
  /* aliases legados (Portal) — superfície "papel" clara do público externo */
  --paper:#EEF3F8; --paper-2:#E6EDF5;
  --line:#e2e8f2; --line-2:#eef2f8; --field-line:#d9e1ee;
  --ink:#16345C; --ink-soft:#3a557d; --muted:#61789C; --faint:#93a4be;
  --heading:var(--ax-navy);

  /* ── SEMÂNTICOS (fg sobre pastel + pares soft) ─────────────────────── */
  --ok:#0b7a43; --ok-soft:#e7f6ee;
  --warn:#8a5a12; --warn-ac:#c2790b; --warn-soft:#fdf2df;
  --danger:#b91c1c; --danger-soft:#fdeaec;
  --info:#1e40af; --info-soft:#e8effc;
  /* aliases legados (Portal usa --ok/--ok-bg/--ok-ink, --err/…, --warn/…) */
  --ok-bg:#e2f6ee; --ok-ink:#0d5e42;
  --err:#E24B4A; --err-bg:#fdecec; --err-ink:#a3231f;
  --warn-bg:#fef4e6; --warn-ink:#92600f;
  --info-bg:#eaf1fb; --info-ink:#1e40af;

  /* ── TOKENS AUXILIARES (Portal — trocados no tema escuro) ──────────── */
  --body-bg-1:#f4f7fb; --body-bg-3:#e9eff6;
  --sel-ink:var(--ink0);
  --badge-navy-bg:#e8eef7; --badge-navy-ink:var(--ax-navy);
  --cat-hover-bg:#f2fbf7; --cat-active-bg:#eafaf3;
  --tbl-hover-bg:#fafcfe;
  --hero-ok-1:#e2f6ee; --hero-ok-2:#c9efdf;
  --hero-err-1:#fdecec; --hero-err-2:#f9d7d7;
  --hero-info-1:#eaf1fb; --hero-info-2:#d7e5f9;

  /* ── ESPAÇAMENTO — 4·8·12·16·20·24·32·40·48·64 ─────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:48px; --sp-10:64px;

  /* ── RADIUS ─────────────────────────────────────────────────────────── */
  --ax-r-sm:8px; --ax-r-md:12px; --ax-r-lg:16px; --ax-r-pill:999px;
  /* aliases legados (Portal usa --r-sm/--r/--r-lg/--r-xl) */
  --r-sm:9px; --r:12px; --r-lg:18px; --r-xl:24px;

  /* ── SHADOW — viés navy, em camadas ────────────────────────────────── */
  --sh-1:0 1px 2px rgba(15,30,54,.04),0 1px 3px rgba(15,30,54,.06);
  --sh-2:0 6px 18px rgba(15,30,54,.08),0 2px 6px rgba(15,30,54,.05);
  --sh-3:0 16px 40px rgba(15,30,54,.14),0 6px 12px rgba(15,30,54,.07);
  /* aliases legados (Portal usa --sh-xs..--sh-lg) */
  --sh-xs:0 1px 2px rgba(16,32,64,.06);
  --sh-sm:0 2px 8px rgba(16,32,64,.07);
  --sh-md:0 10px 30px -8px rgba(16,32,64,.16),0 2px 6px rgba(16,32,64,.05);
  --sh-lg:0 28px 60px -18px rgba(10,26,51,.30),0 6px 16px rgba(16,32,64,.08);

  /* ── MOTION ─────────────────────────────────────────────────────────── */
  --tr:.18s ease; --tr-spring:.28s cubic-bezier(.2,.8,.2,1);
}

/* ═══ TEMA ESCURO ═══ Redefine apenas os tokens que mudam com o tema.
   Ativado por escolha explícita [data-theme="dark"] OU, sem escolha, pela
   preferência do SO. Nunca inverte cegamente: mantém contraste e acento. */
:root[data-theme="dark"]{
  --ax-accent:#22C7E0; --ax-accent-strong:#3ED3E8; --ax-accent-soft:rgba(34,199,224,.14);
  --teal:var(--ax-accent); --teal-3:var(--ax-accent-strong);
  --bg:#0A1A33; --surface:#12294C; --surface-2:#1A3260; --surface-3:#17335c;
  --border:#24466E; --border-strong:#2E5688;
  --t1:#F2F6FC; --t2:#9FB3D1; --t3:#61789C; --t4:#46587A;
  --paper:#0B1A30; --paper-2:#0F2140;
  --line:#22375C; --line-2:#1C2E4E; --field-line:#2C4468;
  --ink:#E9EEF6; --ink-soft:#C3D0E4; --muted:#93A8C8; --faint:#6C82A6;
  --heading:#EDF3FC;
  --ok:#4ade80; --ok-soft:rgba(16,122,67,.18); --ok-bg:rgba(14,143,176,.20); --ok-ink:#6EE7B7;
  --warn:#fbbf24; --warn-ac:#fbbf24; --warn-soft:rgba(194,121,11,.20); --warn-bg:rgba(239,161,60,.20); --warn-ink:#FBBF7D;
  --danger:#fca5a5; --danger-soft:rgba(185,28,28,.22); --err-bg:rgba(226,75,74,.20); --err-ink:#FCA5A5;
  --info:#93c5fd; --info-soft:rgba(30,64,175,.24); --info-bg:rgba(59,130,246,.20); --info-ink:#93C5FD;
  --body-bg-1:#0A1830; --body-bg-3:#091428;
  --sel-ink:#ffffff;
  --badge-navy-bg:rgba(255,255,255,.08); --badge-navy-ink:#DCE6F5;
  --cat-hover-bg:rgba(34,199,224,.08); --cat-active-bg:rgba(34,199,224,.14);
  --tbl-hover-bg:#182C4E;
  --hero-ok-1:rgba(14,143,176,.22); --hero-ok-2:rgba(14,143,176,.10);
  --hero-err-1:rgba(226,75,74,.22); --hero-err-2:rgba(226,75,74,.10);
  --hero-info-1:rgba(59,130,246,.22); --hero-info-2:rgba(59,130,246,.10);
  --sh-1:0 1px 2px rgba(0,0,0,.30); --sh-2:0 8px 24px rgba(0,0,0,.38); --sh-3:0 20px 50px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --ax-accent:#22C7E0; --ax-accent-strong:#3ED3E8; --ax-accent-soft:rgba(34,199,224,.14);
    --teal:var(--ax-accent); --teal-3:var(--ax-accent-strong);
    --bg:#0A1A33; --surface:#12294C; --surface-2:#1A3260; --surface-3:#17335c;
    --border:#24466E; --border-strong:#2E5688;
    --t1:#F2F6FC; --t2:#9FB3D1; --t3:#61789C; --t4:#46587A;
    --paper:#0B1A30; --paper-2:#0F2140;
    --line:#22375C; --line-2:#1C2E4E; --field-line:#2C4468;
    --ink:#E9EEF6; --ink-soft:#C3D0E4; --muted:#93A8C8; --faint:#6C82A6;
    --heading:#EDF3FC;
    --ok:#4ade80; --ok-soft:rgba(16,122,67,.18); --ok-bg:rgba(14,143,176,.20); --ok-ink:#6EE7B7;
    --warn:#fbbf24; --warn-ac:#fbbf24; --warn-soft:rgba(194,121,11,.20); --warn-bg:rgba(239,161,60,.20); --warn-ink:#FBBF7D;
    --danger:#fca5a5; --danger-soft:rgba(185,28,28,.22); --err-bg:rgba(226,75,74,.20); --err-ink:#FCA5A5;
    --info:#93c5fd; --info-soft:rgba(30,64,175,.24); --info-bg:rgba(59,130,246,.20); --info-ink:#93C5FD;
    --body-bg-1:#0A1830; --body-bg-3:#091428;
    --sel-ink:#ffffff;
    --badge-navy-bg:rgba(255,255,255,.08); --badge-navy-ink:#DCE6F5;
    --cat-hover-bg:rgba(34,199,224,.08); --cat-active-bg:rgba(34,199,224,.14);
    --tbl-hover-bg:#182C4E;
    --hero-ok-1:rgba(14,143,176,.22); --hero-ok-2:rgba(14,143,176,.10);
    --hero-err-1:rgba(226,75,74,.22); --hero-err-2:rgba(226,75,74,.10);
    --hero-info-1:rgba(59,130,246,.22); --hero-info-2:rgba(59,130,246,.10);
    --sh-1:0 1px 2px rgba(0,0,0,.30); --sh-2:0 8px 24px rgba(0,0,0,.38); --sh-3:0 20px 50px rgba(0,0,0,.5);
  }
}