/* ─────────────────────────────────────────────────────────────────────────
 * site/design/tokens.css — Course Design Contract tokens (DRAFT)
 *
 * Derived from upstream-elevenlabs/tokens.css (vendored verbatim alongside).
 * ONLY divergence: font stacks per DESIGN.md delta 1 (proprietary Waldenburg
 * family replaced by OFL Hanken Grotesk; everything else upstream-identical).
 * Ratified 2026-08-24 — see DESIGN.md ratification record.
 * Production self-hosts fonts; never CDN.
 * ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ─── Surface ─── */
  --bg: #ffffff;
  --surface: #f5f5f5;
  --surface-warm: #f5f2ef;

  /* ─── Foreground ─── */
  --fg: #000000;
  --fg-2: #4e4e4e;
  --muted: #777169;
  --meta: var(--muted);

  /* ─── Border ─── */
  --border: #e5e5e5;
  --border-soft: rgba(0, 0, 0, 0.05);

  /* ─── Accent (achromatic — ratified strict 2026-08-24) ─── */
  --accent: #000000;
  --accent-on: #ffffff;
  --accent-hover: #1a1a1a;
  --accent-active: #333333;

  /* ─── Semantic ─── */
  --success: #16a34a;
  --warn: #eab308;
  --danger: #dc2626;

  /* ─── Typography (delta 1: Hanken Grotesk replaces Waldenburg) ─── */
  --font-display: "Hanken Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 36px;
  --text-4xl: 48px;

  --leading-body: 1.5;
  --leading-tight: 1.08;
  --tracking-display: -0.02em;
  --tracking-body: 0.01em; /* ≈ +0.16px at 16px — the airy Inter reading rhythm */

  /* ─── Spacing ─── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --section-y-desktop: 96px;
  --section-y-tablet: 64px;
  --section-y-phone: 48px;

  /* ─── Radius ─── */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 9999px;

  /* ─── Elevation ─── */
  --elev-flat: none;
  --elev-ring: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 1px 2px, rgba(0, 0, 0, 0.04) 0px 2px 4px;
  --elev-raised: rgba(0, 0, 0, 0.4) 0px 0px 1px, rgba(0, 0, 0, 0.04) 0px 4px 4px;
  --elev-warm: rgba(78, 50, 23, 0.04) 0px 6px 16px;

  /* ─── Focus ─── */
  --focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.5);

  /* ─── Motion ─── */
  --motion-fast: 150ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ─── Layout ─── */
  --container-max: 1200px;
  --container-gutter-desktop: 24px;
  --container-gutter-tablet: 16px;
  --container-gutter-phone: 12px;
}