/* ============================================================================
   tokens.css — Design tokens do Ello (2 temas consistentes + auto)
   Fonte única de verdade pra cores, tipografia, spacing, radii, sombras.

   Temas:
     - :root (claro)        — creme editorial, default
     - [data-theme="dark"]  — navy profundo + cream/gold
     - [data-theme="auto"]  — segue preferência do sistema

   Contraste garantido WCAG AA em text/bg principais.
   ============================================================================ */

/* Nota: :root serve como fallback. data-theme="light" tem tokens IDÊNTICOS
   com mais especificidade pra vencer regras antigas do core.css. */
:root, html[data-theme="light"] {
  /* ── TEMA CLARO (creme editorial Ello) — DEFAULT ────────────────────── */
  --bg:               #f7f3ea;    /* creme editorial */
  --bg-elev:          #ffffff;    /* cards */
  --bg-sunken:        #ece7d8;    /* áreas rebaixadas, toolbars */
  --bg-input:         #ffffff;
  --bg-dark:          #201a13;    /* neutro marrom-escuro */

  --line:             #e3dcc9;    /* borders creme escuro */
  --line-strong:      #cdc3a8;
  --line-subtle:      #ede7d4;

  --text:             #201a13;    /* marrom-escuro quase preto — 15.3:1 */
  --text-2:           #5a4f3c;    /* warm grey — 7.2:1 AA pra texto normal */
  --text-3:           #807060;    /* hints — 4.6:1 AA (Sprint D: escurecido de #97897a 3.2:1) */
  --text-4:           #a89886;    /* decorativo, só pra ícones/borders */

  --brand:            #201a13;    /* neutro escuro */
  --brand-soft:       #2d2518;
  --brand-contrast:   #ffffff;

  --accent:           #c55a3f;    /* TERRACOTA — substitui gold */
  --accent-hover:     #a84830;
  --accent-soft:      #f5e3db;    /* terracota fundo bem sutil */
  --accent-contrast:  #ffffff;

  --signature:        linear-gradient(90deg, var(--accent) 0%, var(--accent) 60%, transparent 100%);

  /* Estados — testados contra bg claro */
  --ok:               #15803d;    /* green-700 — 5.8:1 */
  --ok-soft:          #dcfce7;
  --warn:             #92400e;    /* amber-800 — 7.2:1 (em vez de 700) */
  --warn-soft:        #fef3c7;
  --err:              #b91c1c;    /* red-700 — 5.9:1 */
  --err-soft:         #fee2e2;
  --info:             #1d4ed8;    /* blue-700 — 7.3:1 */
  --info-soft:        #dbeafe;

  /* ── Tipografia ──────────────────────────────────────────────────────── */
  --font-sans:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans-alt:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif:       var(--font-sans);    /* admin não usa serif — herança neutra */
  --font-mono:        'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  --text-xs:          11px;
  --text-sm:          13px;
  --text-base:        14px;
  --text-md:          15px;
  --text-lg:          17px;
  --text-xl:          20px;
  --text-2xl:         24px;
  --text-3xl:         30px;
  --text-4xl:         38px;
  --text-5xl:         48px;
  --text-display:     60px;

  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.55;
  --leading-relaxed:  1.7;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.1em;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ── Spacing ─────────────────────────────────────────────────────────── */
  --space-0:  0;       --space-1:  4px;    --space-2:  8px;    --space-3:  12px;
  --space-4:  16px;    --space-5:  20px;   --space-6:  24px;   --space-8:  32px;
  --space-10: 40px;    --space-12: 48px;   --space-16: 64px;   --space-20: 80px;
  --space-24: 96px;    --space-32: 128px;

  /* ── Radii ───────────────────────────────────────────────────────────── */
  --radius-sm:   4px;   --radius:   6px;   --radius-md: 8px;
  --radius-lg:  12px;   --radius-xl: 16px; --radius-pill: 999px;

  /* ── Sombras sutis (Sprint B: cor marrom-escuro alinhada ao texto principal
       — antes eram azul-navy rgba(10,22,40,...) que em fundo creme ficavam
       quase invisíveis) ─────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(32, 26, 19, 0.06);
  --shadow:    0 2px 8px rgba(32, 26, 19, 0.08);
  --shadow-md: 0 8px 24px rgba(32, 26, 19, 0.10);
  --shadow-lg: 0 16px 40px rgba(32, 26, 19, 0.14);

  --ring-color: rgba(197, 90, 63, 0.3);
  --ring: 0 0 0 3px var(--ring-color);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 120ms; --dur: 180ms; --dur-slow: 280ms;

  --sidebar-w: 240px;
  --header-h: 60px;
  --max-content: 1200px;
}

/* ──────────────────────────────────────────────────────────────────────────
   DARK — cinzas neutros consistentes (sem gold vivo)
   Contraste testado: bg #1a1a1a vs text #fafafa = 16.1:1 (AAA)
   ────────────────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:               #1a1a1a;    /* quase preto neutro */
  --bg-elev:          #262626;    /* cards */
  --bg-sunken:        #111111;
  --bg-input:         #1e1e1e;
  --bg-dark:          #0a0a0a;

  --line:             #3a3a3a;
  --line-strong:      #525252;
  --line-subtle:      #2a2a2a;

  --text:             #fafafa;    /* off-white — AAA */
  --text-2:           #a3a3a3;    /* 5.7:1 AA */
  --text-3:           #737373;    /* 4.2:1 AA large */
  --text-4:           #525252;

  --brand:            #fafafa;
  --brand-soft:       #e5e5e5;
  --brand-contrast:   #1a1a1a;

  --accent:           #d67556;    /* terracota clareado pra contraste no escuro */
  --accent-hover:     #e38a6d;
  --accent-soft:      #3a2620;    /* terracota escuro como soft */
  --accent-contrast:  #ffffff;

  --ok:               #7aa583;    --ok-soft:   #1f2e22;
  --warn:             #d89a4a;    --warn-soft: #2f2312;
  --err:              #d47a6a;    --err-soft:  #2e1b18;
  --info:             #7ca3d6;    --info-soft: #1a2436;

  --ring-color: rgba(214, 117, 86, 0.35);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:    0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* Auto — segue preferência do sistema */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg:#1a1a1a; --bg-elev:#262626; --bg-sunken:#111111; --bg-input:#1e1e1e; --bg-dark:#0a0a0a;
    --line:#3a3a3a; --line-strong:#525252; --line-subtle:#2a2a2a;
    --text:#fafafa; --text-2:#a3a3a3; --text-3:#737373; --text-4:#525252;
    --brand:#fafafa; --brand-soft:#e5e5e5; --brand-contrast:#1a1a1a;
    --accent:#d67556; --accent-hover:#e38a6d; --accent-soft:#3a2620; --accent-contrast:#ffffff;
    --ok:#7aa583; --ok-soft:#1f2e22; --warn:#d89a4a; --warn-soft:#2f2312;
    --err:#d47a6a; --err-soft:#2e1b18; --info:#7ca3d6; --info-soft:#1a2436;
    --ring-color: rgba(214, 117, 86, 0.35);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 2px 8px rgba(0,0,0,.4);
    --shadow-md: 0 8px 24px rgba(0,0,0,.5); --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
  }
}

/* Transição de troca de tema — APENAS em html/body.
   ANTES aplicávamos em `*` (todos os elementos), o que fazia milhares de elementos
   animarem juntos a cada mudança de tab (não só na troca de tema), causando
   lentidão significativa. As transições específicas de .btn/.ni/.card/.stat/etc.
   continuam cuidando dos hovers individuais. */
html, body {
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}