/* ============================================================
   SI DESIGN SYSTEM — core/tokens.css
   v2.0 · 2026 · Soluções e Inteligência (SI-wide)
   ============================================================
   Tokens NEUTROS (typography vars, spacing, radius, shadow,
   z-index, motion, semantic aliases). Sem cores cromáticas —
   essas vêm dos themes em ../themes/*.css
   ============================================================ */

:root {
  /* ===== TYPOGRAPHY VARS ===== */
  --font-title: 'Fraunces', serif;
  --font-display: 'Mate', 'Fraunces', serif;        /* Hora do Mate */
  --font-tribe: 'Cinzel', serif;                    /* Hora do Mate caps */
  --font-eyebrow: 'Bebas Neue', sans-serif;         /* Hora do Mate labels */
  --font-hand: 'Caveat', cursive;                   /* Quotes manuscritos */
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ===== SPACING SCALE ===== */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ===== RADIUS ===== */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-md: 18px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ===== SHADOW ===== */
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-glow-sm: 0 0 20px var(--gold-glow);
  --shadow-glow: 0 0 60px var(--gold-glow);

  /* ===== Z-INDEX ===== */
  --z-bg: 0;
  --z-content: 2;
  --z-topbar: 50;
  --z-progress: 60;
  --z-modal: 9999;
  --z-cursor: 10000;

  /* ===== MOTION ===== */
  --easing: cubic-bezier(.2, .8, .2, 1);
  --easing-snap: cubic-bezier(.7, 0, .3, 1);
  --t-fast: 0.15s;
  --t-base: 0.25s;
  --t-slow: 0.4s;
  --t-slower: 0.6s;

  /* ===== SEMANTIC ALIASES =====
     Apontam para variáveis cromáticas que vêm dos themes.
     Carregue um theme depois deste arquivo. */
  --bg-color: var(--bg);
  --surface-color: var(--surface);
  --text-color: var(--text);
  --primary-color: var(--gold);
  --primary-dark: var(--gold-deep);
  --primary-text-color: var(--bg);
  --secondary-text-color: var(--text-soft);
  --border-color: var(--border);
  --success-color: var(--green-success);
  --error-color: var(--crimson);

  /* Quiz states */
  --incorrect-bg: rgba(139, 44, 63, 0.18);
  --incorrect-text: #F5BFC7;
}