/* ============================================================
 * Design Tokens — Phase 1
 *
 * All CSS custom properties mapped 1:1 from existing
 * hardcoded values in main.css. Zero visual change.
 * ============================================================ */

:root {
  /* ── Colors ─────────────────────────────────────────────── */
  --color-primary: #602571;
  --color-primary-light: #7a3a8a;
  --color-primary-dark: #4a1d5a;
  --color-primary-rgb: 96, 37, 113;
  --color-primary-on: #ffffff;
  --color-text: #5d666b;
  --color-text-bold: #3d4449;
  --color-heading: #3d4449;
  --color-bg: #ffffff;
  --color-bg-sidebar: #f5f6f7;
  --color-bg-sidebar-alt: #eff1f2;
  --color-border: rgba(210, 215, 217, 0.75);
  --color-border-light: rgba(210, 215, 217, 0.4);
  --color-meta: #9fa3a6;
  --color-accent-bg: rgba(230, 235, 237, 0.25);
  --color-toggle-bg: rgba(222, 225, 226, 0.75);
  --color-accent: #d94848;
  --color-primary-hover: #7d3c8e;

  /* ── Typography ─────────────────────────────────────────── */
  --font-family-body: 'Open Sans', sans-serif;
  --font-family-heading: 'Roboto Slab', serif;
  --font-family-mono: 'Courier New', monospace;
  --font-size-base: 13pt;
  --font-size-1680: 11pt;
  --font-size-1280: 10pt;
  --font-size-360: 9pt;
  --font-size-h1: 4em;
  --font-size-h2: 1.75em;
  --font-size-h3: 1.25em;
  --font-size-h4: 1.1em;
  --font-size-h5: 0.9em;
  --font-size-h6: 0.7em;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --font-weight-heavy: 700;
  --line-height-body: 1.65;
  --line-height-heading: 1.5;

  /* ── Breakpoints (defined, not applied in Phase 1) ──────── */
  --bp-xlarge: 1680px;
  --bp-large: 1280px;
  --bp-medium: 980px;
  --bp-small: 736px;
  --bp-xsmall: 480px;

  /* ── Spacing ────────────────────────────────────────────── */
  --space-section: 6em;
  --space-section-bottom: 4em;
  --space-element: 2em;

  /* ── Radii ──────────────────────────────────────────────── */
  --radius: 0.375em;
  --radius-sm: 0.25rem;
  --radius-lg: 0.5rem;

  /* ── Transitions ────────────────────────────────────────── */
  --transition-duration: 0.2s;
  --transition-easing: ease-in-out;
}