/* tokens.css — CRAB v2 design system
 *
 * Extends v1's warm palette. No color shifts yet — just formalized tokens +
 * new axes for type scale, spacing, motion, elevation, and signal colors.
 * Consumed by everything in v2; Phase 2 will migrate base.css + components.css
 * to reference these instead of hard-coded values.
 */

:root {
  /* ---------- Color — warm palette (v1-compatible) ---------- */
  --color-bg:           #1a1713;  /* body — a shade deeper than v1 for more contrast */
  --color-bg-raised:    #211e19;  /* v1's --bg-dark */
  --color-surface:      #2b2721;  /* v1's --bg-card */
  --color-surface-hi:   #33302a;  /* v1's --bg-card-hover */
  --color-ink:          #f6ecd3;  /* body text */
  --color-ink-muted:    #e8dfc9;  /* secondary text */
  --color-ink-dim:      #a89e87;  /* metadata, timestamps */
  --color-accent:       #8c956a;  /* olive — primary action */
  --color-accent-hi:    #a3ad7e;  /* accent hover */
  --color-accent-cream: #ddd2b1;  /* cream highlight */
  --color-line:         #3d3830;  /* borders */
  --color-line-hi:      #554d41;  /* borders on hover */

  /* ---------- Signal colors (new) ---------- */
  --color-live:         #d4603a;  /* warm red-orange, not emergency red */
  --color-live-glow:    rgba(212, 96, 58, 0.35);
  --color-studio:       #e08a4f;  /* a shade warmer — used for in-studio flag */
  --color-success:      #7a9464;
  --color-warn:         #d4a74a;

  /* ---------- Typography scale — 1.25 (major third), anchored at 1rem ---------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.563rem;
  --text-2xl:  1.953rem;
  --text-3xl:  2.441rem;
  --text-4xl:  3.052rem;
  --text-5xl:  3.815rem;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* Font families — Phase 2 pick: Pairing E (70s vintage rock).
     Self-hosted from static/fonts/; see assets/css/fonts.css for @font-face. */
  --font-display: "Righteous", "Hoefler Text", Georgia, serif;
  --font-body:    "Lora", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --font-mono:    "Courier Prime", ui-monospace, "Courier New", Courier, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ---------- Spacing — 4px grid ---------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---------- Radii ---------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ---------- Elevation — warm shadows, not gray ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--color-line);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--color-line);
  --shadow-glow-live: 0 0 24px var(--color-live-glow);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    140ms;
  --dur-med:     260ms;
  --dur-slow:    480ms;

  /* ---------- Layout ---------- */
  --max-content: 1200px;
  --max-prose:   72ch;

  /* ---------- Component tokens (hoisted for reuse) ---------- */
  --banner-bg: var(--color-surface);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; }
}