:root {
  /* ── Families ────────────────────────────────────────────────── */
  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", "Courier New", monospace;

  /* ── Weights ─────────────────────────────────────────────────── */
  --w-light: 300;
  --w-reg: 400;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;
  --w-black: 900;

  /* ── Display scale (Bodoni Moda) ─────────────────────────────── */
  --t-display-xl: clamp(3.25rem, 16vw, 7.5rem);
  --t-display-l: clamp(2.5rem, 12vw, 5rem);
  --t-display-m: clamp(2rem, 8vw, 3.25rem);
  --t-display-s: clamp(1.6rem, 6vw, 2.25rem);

  /* ── Text scale (Hanken Grotesk) ─────────────────────────────── */
  --t-lead: 1.375rem;
  --t-h: 1.125rem;
  --t-body: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.8125rem;

  /* ── Mono / label scale (IBM Plex Mono) ──────────────────────── */
  --t-label: 0.75rem;
  --t-meta: 0.6875rem;
  --t-micro: 0.625rem;

  /* ── Line heights ────────────────────────────────────────────── */
  --lh-tight: 0.94;
  --lh-snug: 1.12;
  --lh-normal: 1.45;
  --lh-relaxed: 1.62;
  --lh-loose: 2;

  /* ── Letter spacing ──────────────────────────────────────────── */
  --ls-display: -0.01em;
  --ls-tight: -0.005em;
  --ls-normal: 0;
  --ls-label: 0.18em;
  --ls-meta: 0.14em;
  --ls-wide: 0.32em;

  /* ── Raw scale — cool neutrals (ink) ─────────────────────────── */
  --ink-900: #20262C;
  --ink-700: #3D4A56;
  --ink-500: #5C6B78;
  --ink-400: #6B7884;
  --ink-300: #97A3AD;

  /* ── Raw scale — sky (brand blues) ───────────────────────────── */
  --sky-700: #4A6075;
  --sky-500: #6E8497;
  --sky-400: #9FB4C7;
  --sky-200: #C7D3DE;
  --sky-100: #DFE7ED;

  /* ── Raw scale — paper (cool off-whites) ─────────────────────── */
  --paper-0: #FFFFFF;
  --paper-50: #F6F8FA;
  --paper-100: #EEF1F4;
  --paper-200: #E4E9ED;

  /* ── Raw scale — clay (the single warm accent) ───────────────── */
  --clay-600: #946B36;
  --clay-500: #B5894E;
  --clay-300: #D8C29B;
  --clay-100: #EFE6D6;

  /* ── Semantic — surfaces ─────────────────────────────────────── */
  --bg: var(--paper-100);
  --bg-raised: var(--paper-50);
  --surface: var(--paper-0);
  --surface-sunk: var(--paper-200);
  --surface-invert: var(--ink-900);

  /* ── Semantic — text ─────────────────────────────────────────── */
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-muted: var(--ink-400);
  --text-faint: var(--ink-300);
  --text-invert: var(--paper-100);
  --text-on-accent: #FFFFFF;

  /* ── Semantic — lines & accents ──────────────────────────────── */
  --border: rgba(32, 38, 44, 0.12);
  --border-strong: rgba(32, 38, 44, 0.24);
  --rule: rgba(32, 38, 44, 0.20);

  --accent: var(--clay-500);
  --accent-deep: var(--clay-600);
  --accent-wash: var(--clay-100);

  --link: var(--ink-900);
  --link-hover: var(--sky-700);
  --focus-ring: var(--sky-700);

  /* ── Semantic — feedback (muted, never neon) ─────────────────── */
  --error: #A8473F;
  --success: #5C7A5E;
  --info: var(--sky-700);

  /* ── Overlays & scrims ───────────────────────────────────────── */
  --scrim: rgba(20, 26, 31, 0.46);
  --scrim-strong: rgba(20, 26, 31, 0.66);
  --scrim-light: rgba(255, 255, 255, 0.10);

  /* ── Spacing (8px base) ──────────────────────────────────────── */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ── Layout ──────────────────────────────────────────────────── */
  --gutter: 24px;
  --gutter-wide: 48px;
  --maxw-text: 34rem;
  --maxw-content: 1180px;
  --section-y: 80px;

  /* ── Radii ───────────────────────────────────────────────────── */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ── Elevation ───────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(20, 26, 31, 0.04), 0 1px 1px rgba(20, 26, 31, 0.03);
  --shadow-2: 0 2px 6px rgba(20, 26, 31, 0.06), 0 12px 28px rgba(20, 26, 31, 0.08);
  --shadow-3: 0 8px 16px rgba(20, 26, 31, 0.08), 0 28px 60px rgba(20, 26, 31, 0.14);
  --ring: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--focus-ring);

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur-normal: 240ms;
  --dur-slow: 480ms;
  --dur-reveal: 720ms;
}

/* ── Dark "feature" canvas ─────────────────────────────────────── */
[data-theme="dark"] {
  --bg: #171B1F;
  --bg-raised: #1E2429;
  --surface: #20262B;
  --surface-sunk: #12161A;
  --surface-invert: var(--paper-100);

  --text-primary: #ECEFF2;
  --text-secondary: #B4BEC6;
  --text-muted: #7E8A93;
  --text-faint: #5A6670;
  --text-invert: var(--ink-900);
  --text-on-accent: #1A1408;

  --border: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.24);
  --rule: rgba(255, 255, 255, 0.22);

  --accent: var(--clay-300);
  --accent-deep: var(--clay-500);
  --accent-wash: rgba(216, 194, 155, 0.10);

  --link: #ECEFF2;
  --link-hover: var(--sky-400);
  --focus-ring: var(--sky-400);

  --error: #C9756C;
  --success: #8FAE8F;

  --scrim: rgba(8, 11, 14, 0.46);
  --scrim-strong: rgba(8, 11, 14, 0.70);
  --scrim-light: rgba(255, 255, 255, 0.08);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.34), 0 12px 28px rgba(0, 0, 0, 0.40);
  --shadow-3: 0 8px 16px rgba(0, 0, 0, 0.40), 0 28px 60px rgba(0, 0, 0, 0.55);
}

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