/* ============================================================================
   JoGPT Design Tokens — single source of truth for the design system.
   Load this BEFORE main.css. Component CSS should reference these tokens
   (var(--font-sans), var(--space-4), var(--surface) …) instead of hard-coding
   fonts, spacing, or raw colours, so the whole site stays restyle-able.
   Created 2026-06-04 (Phase 5). Colours currently still live in main.css :root
   and are aliased semantically below; migrate raw colour literals here over time.
   ============================================================================ */
:root {
  /* ── Type families ──────────────────────────────────────────────────────── */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: var(--font-sans);            /* alias — swap to a display face later if wanted */
  --font-display: 'Clash Display', var(--font-sans); /* wordmark / hero accents */
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-mono: Consolas, Monaco, 'Courier New', monospace;

  /* ── Type scale (≈1.2 minor third) ──────────────────────────────────────── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.35rem;
  --text-xl: 1.6rem;
  --text-2xl: 1.95rem;
  --text-3xl: 2.35rem;
  --leading-tight: 1.2;
  --leading-normal: 1.55;

  /* ── Spacing scale (4px base) ───────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Radii / motion (──radius & ──radius-sm remain in main.css) ─────────── */
  --radius-pill: 999px;
  --transition-fast: 0.15s ease;
  --transition: 0.25s ease;

  /* ── Semantic colour aliases (resolve from main.css :root at use-time) ───── */
  --color-bg: var(--green-snow);
  --surface: var(--white);
  --text: var(--text-dark);
  --text-muted: var(--text-soft);
  --primary: var(--green-mid);
  --primary-strong: var(--green-dark);
  --danger: var(--red);
  --warning: var(--amber);
}