/* tokens.css — BRUJO Design System — Fire/Ember Palette */
:root {
  /* ── Background & Surfaces ──────────────────────────────────── */
  --color-bg:           #1a1a1a;
  --color-surface:      #222018;
  --color-card:         #2a2318;
  --color-card-hover:   #302b1e;
  --color-border:       #3a2e1a;
  --color-border-accent:#5a4020;

  /* ── Accents: fire / ember / bronze ─────────────────────────── */
  --color-bronze:   #b8722a;
  --color-amber:    #d4904a;
  --color-fire:     #e06820;
  --color-gold:     #d4a830;
  --color-ember:    #f0c060;
  --color-glow:     rgba(184, 114, 42, 0.12);

  /* ── Text ───────────────────────────────────────────────────── */
  --color-text:       #f0e4cc;
  --color-text-muted: #907860;
  --color-text-dim:   #5a4430;

  /* ── Feedback ───────────────────────────────────────────────── */
  --color-success: #4a9060;
  --color-danger:  #cc4030;
  --color-locked:  rgba(42, 35, 24, 0.92);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-ritual: 'Cinzel', 'Palatino Linotype', serif;
  --font-body:   'Raleway', 'Segoe UI', sans-serif;
  --font-mono:   'Courier New', monospace;

  /* ── Scale ──────────────────────────────────────────────────── */
  --text-xs:  0.7rem;
  --text-sm:  0.85rem;
  --text-md:  1rem;
  --text-lg:  1.15rem;
  --text-xl:  1.4rem;
  --text-2xl: 1.9rem;
  --text-3xl: 2.6rem;

  /* ── Spacing ────────────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* ── Borders ────────────────────────────────────────────────── */
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-lg:  8px;

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease:       cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition: 0.25s var(--ease);

  /* ── Shadows & Glows ────────────────────────────────────────── */
  --glow-sm: 0 0 8px  rgba(184, 114, 42, 0.35);
  --glow-md: 0 0 20px rgba(184, 114, 42, 0.25), 0 0 60px rgba(184, 114, 42, 0.08);
  --shadow:  0 4px 24px rgba(0, 0, 0, 0.5);

  /* ── Layout ─────────────────────────────────────────────────── */
  --nav-h:      56px;
  --max-w:      720px;
  --pad:        var(--sp-4);
}

@media (min-width: 640px) {
  :root { --pad: var(--sp-6); }
}