/* ============================================================
   Design Tokens
   Colors, typography, spacing — defined once, used everywhere.
   Dark mode remaps semantic variables; raw palette stays constant.
   ============================================================ */

:root {
  /* --- Raw Palette --- */
  --color-ink:        #1a1917;
  --color-charcoal:   #3b3632;
  --color-slate:      #685f58;
  --color-warm-gray:  #97918a;
  --color-stone:      #c5beb4;
  --color-sand:       #e8e2d9;
  --color-linen:      #f2ede6;
  --color-white:      #f9f6f1;
  --color-accent:     #a0705a;
  --color-accent-lt:  #b8836a;

  /* --- Dark raw palette (warm near-blacks) --- */
  --color-dark-bg:      #1c1a18;
  --color-dark-surface: #242120;
  --color-dark-border:  #2a2725;
  --color-dark-muted:   #3a3633;

  /* --- Semantic Mappings (light default) --- */
  --bg:             var(--color-white);
  --bg-alt:         var(--color-linen);
  --border:         var(--color-sand);
  --text:           var(--color-charcoal);
  --text-heading:   var(--color-ink);
  --text-muted:     var(--color-slate);
  --text-faint:     var(--color-warm-gray);
  --accent:         var(--color-accent);
  --accent-hover:   var(--color-accent-lt);
  --btn-bg:         var(--color-ink);
  --btn-text:       var(--color-white);
  --bg-elevated:    var(--color-linen);

  /* --- Typography --- */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* --- Spacing (8px base) --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Dark mode: explicit toggle */
[data-theme="dark"] {
  --bg:           var(--color-dark-bg);
  --bg-alt:       var(--color-dark-surface);
  --bg-elevated:  var(--color-dark-border);
  --border:       var(--color-dark-muted);
  --text:         var(--color-stone);
  --text-heading: var(--color-linen);
  --text-muted:   var(--color-warm-gray);
  --text-faint:   var(--color-slate);
  --accent:       var(--color-accent-lt);
  --accent-hover: var(--color-accent);
  --btn-bg:       var(--color-linen);
  --btn-text:     var(--color-ink);
}

/* Dark mode: system preference (unless user explicitly chose light) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           var(--color-dark-bg);
    --bg-alt:       var(--color-dark-surface);
    --bg-elevated:  var(--color-dark-border);
    --border:       var(--color-dark-muted);
    --text:         var(--color-stone);
    --text-heading: var(--color-linen);
    --text-muted:   var(--color-warm-gray);
    --text-faint:   var(--color-slate);
    --accent:       var(--color-accent-lt);
    --accent-hover: var(--color-accent);
    --btn-bg:       var(--color-linen);
    --btn-text:     var(--color-ink);
  }
}