/* ==========================================================
   Marioneta — Design Token System
   Fonte única de verdade para cor, tipografia e espaçamento.

   Arquitetura:
     PRIMITIVES  →  cores, spacing, typography raw values
     SEMANTIC    →  roles (surface, text, border, brand)
     THEME       →  dark (default) + light overrides
     COMPAT      →  aliases legados (manter até migração completa)

   Carregar sempre com <link rel="stylesheet" href="/css/tokens.css">
   ANTES do <style> da própria página.
   ========================================================== */

/* ── PRIMITIVES ────────────────────────────────────────────── */
:root {
  /* spacing — 4px grid unit */
  --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;
  --space-10: 128px;

  /* layout */
  --reading: 720px;
  --content: 840px;
  --grid: 1120px;
  --wide: 1440px;
  --page-gutter: 24px;

  /* radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --radius: var(--radius-lg);

  /* typography */
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Archivo", system-ui, -apple-system, sans-serif;

  /* cordas — 7 valores canónicos */
  --c-desejo: #e4675f;
  --c-escola: #6c86c9;
  --c-educacao: var(--c-escola);
  --c-dinheiro: #c9974f;
  --c-poder: #a83a3a;
  --c-vaidade: #b06bab;
  --c-ruido: #4fb8c9;
  --c-medo: #6b5b95;
}

/* ── DARK THEME (default) ──────────────────────────────────── */
:root,
[data-theme="dark"] {
  /* surfaces */
  --surface-page: #04090b;
  --surface-raised: #0a1416;
  --surface-card: #0e1b1c;
  --surface-card-raised: #122325;
  --surface-elevated: #162a2d;
  --surface-input: #0a1416;

  /* text */
  --text-primary: #fefbee;
  --text-secondary: #aab8b7;
  --text-muted: #7f9291;
  --text-inverse: #04090b;

  /* border */
  --border-default: #203235;
  --border-subtle: #1a2a2d;
  --border-strong: #2d4043;

  /* brand */
  --brand-primary: #bc985c;
  --brand-primary-hover: #d0ad6b;
  --brand-secondary: #a7c1bc;
  --brand-gradient: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));

  /* feedback */
  --focus-ring: #5fe0d8;
  --error: #e4675f;
  --success: #4fb8c9;

  /* shadows */
  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.5);
  --shadow-elevated: 0 8px 32px rgba(0,0,0,.4);

  /* backward compat — map old names to semantic */
  --bg: var(--surface-page);
  --bg-2: var(--surface-raised);
  --card: var(--surface-card);
  --card-raised: var(--surface-card-raised);
  --card-border: var(--border-default);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-muted);
  --accent: var(--brand-primary);
  --accent-hover: var(--brand-primary-hover);
  --accent-2: var(--brand-secondary);
  --gradient: var(--brand-gradient);
  --focus: var(--focus-ring);
  --line: var(--border-default);
  --line-input: var(--border-default);
  --muted: var(--text-secondary);
  --muted-dim: var(--text-muted);
  --grad: var(--brand-gradient);
  --mono: var(--sans);
  --panel: var(--surface-card);
  --gold: var(--brand-primary);
  --teal: var(--brand-secondary);
  --violet: var(--brand-primary);
  --amber: var(--brand-primary);
  --pink: var(--brand-secondary);
  --cyan: var(--brand-secondary);
  --card-bg: linear-gradient(180deg, rgba(17,27,29,.92), rgba(9,15,17,.92));
  --card-shadow: var(--shadow-card);
  --pill-bg: linear-gradient(var(--surface-card), var(--surface-card)) padding-box, var(--brand-gradient) border-box;
}

/* ── LIGHT THEME ───────────────────────────────────────────── */
[data-theme="light"] {
  /* surfaces — warm ivory, not clinical white */
  --surface-page: #faf8f2;
  --surface-raised: #f0ede4;
  --surface-card: #f5f2ea;
  --surface-card-raised: #ebe6da;
  --surface-elevated: #ffffff;
  --surface-input: #f0ede4;

  /* text — charcoal, not pure black */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #7a7a7a;
  --text-inverse: #faf8f2;

  /* border — warm neutral */
  --border-default: #d4cfc4;
  --border-subtle: #e5e0d5;
  --border-strong: #b8b0a0;

  /* brand — deeper gold for contrast on light; secondary must stay
     paler than primary (mirrors the dark-theme ratio) or the CTA
     gradient reads as muddy olive instead of gold-to-pale-accent */
  --brand-primary: #8a6b3a;
  --brand-primary-hover: #a07d44;
  --brand-secondary: #9fc0b8;
  --brand-gradient: linear-gradient(120deg, var(--brand-primary), var(--brand-secondary));

  /* feedback */
  --focus-ring: #3a7a72;
  --error: #c4433a;
  --success: #3a8a82;

  /* shadows — lighter for light theme */
  --shadow-card: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.06);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,.1);

  /* backward compat */
  --bg: var(--surface-page);
  --bg-2: var(--surface-raised);
  --card: var(--surface-card);
  --card-raised: var(--surface-card-raised);
  --card-border: var(--border-default);
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-muted);
  --accent: var(--brand-primary);
  --accent-hover: var(--brand-primary-hover);
  --accent-2: var(--brand-secondary);
  --gradient: var(--brand-gradient);
  --focus: var(--focus-ring);
  --line: var(--border-default);
  --line-input: var(--border-default);
  --muted: var(--text-secondary);
  --muted-dim: var(--text-muted);
  --grad: var(--brand-gradient);
  --mono: var(--sans);
  --panel: var(--surface-card);
  --gold: var(--brand-primary);
  --teal: var(--brand-secondary);
  --violet: var(--brand-primary);
  --amber: var(--brand-primary);
  --pink: var(--brand-secondary);
  --cyan: var(--brand-secondary);
  --card-bg: linear-gradient(180deg, rgba(245,242,234,.95), rgba(240,237,228,.95));
  --card-shadow: var(--shadow-card);
  --pill-bg: linear-gradient(var(--surface-card), var(--surface-card)) padding-box, var(--brand-gradient) border-box;
}