/* Design tokens — modeled on libraries.dev: near-white canvas, white cards,
   hairline borders, mono labels, one cyan accent (#00aeef). */
:root {
  --bg: #fafafa;
  --bg-glow: radial-gradient(1200px 520px at 75% -10%, rgba(0, 174, 239, 0.10), transparent 70%);
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.07);
  --line: #ececec;
  --text: #0d0d0d;
  --muted: #5e6073;
  --chip-bg: #f2f2f3;
  --chip-bg-hover: #e8e8ea;
  --stage-bg: linear-gradient(180deg, #f7f8f9 0%, #eff1f3 100%);
  --stage-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(0, 0, 0, 0.03);

  /* #00aeef fails text contrast on white (2.4:1), so text uses --accent-ink */
  --accent: #00aeef;
  --accent-ink: #0079a8;
  --accent-soft: rgba(0, 174, 239, 0.11);
  --accent-glow: 0 0 0 1px rgba(0, 174, 239, 0.35), 0 8px 24px -6px rgba(0, 174, 239, 0.45);

  --primary-bg: #0d0d0d;
  --primary-bg-hover: #2a2a2a;
  --primary-text: #ffffff;
  /* Main buttons: cyan fill. White on #00aeff is 2.5:1, so labels use dark teal (6.7:1). */
  --btn-primary-bg: #00aeff;
  --btn-primary-gradient: linear-gradient(180deg, #2ebbff 0%, #00aeff 55%, #00a3f0 100%);
  --btn-primary-text: #04222e;
  --ok: #1f9d55;
  --warn: #e8a317;
  --crit: #d64545;

  /* Layered elevation: contact shadow + ambient + long soft falloff */
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 6px -1px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 10px -2px rgba(16, 24, 40, 0.06), 0 14px 32px -10px rgba(16, 24, 40, 0.10);
  --shadow-3: 0 2px 4px rgba(16, 24, 40, 0.05), 0 10px 22px -6px rgba(16, 24, 40, 0.10), 0 28px 56px -16px rgba(16, 24, 40, 0.18);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.2), 0 4px 12px -4px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale: 4px steps, nothing larger than the hero heading (52px). */
  --fs-12: 0.75rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-44: 2.75rem;
  --fs-48: 3rem;
  --fs-52: 3.25rem;

  --text-hero: var(--fs-52);
  --text-stat: var(--fs-48);
  --text-h2: var(--fs-40);
  --text-lead: var(--fs-20);
  --text-base: var(--fs-16);
  --text-label: var(--fs-12);

  --radius-s: 8px;
  --radius-m: 14px;
  --radius-l: 20px;
  --gutter: 24px;
  --maxw: 1160px;
  /* Spacing: every margin, padding and gap is a multiple of 4px. The layout-level
     steps below shrink at the tablet and phone breakpoints instead of scaling fluidly. */
  --space-section: 128px;
  --space-chapter: 112px;
  --space-hero-top: 96px;
  --space-hero-bottom: 80px;
  --space-split: 80px;
  --space-panel: 64px;
  --space-block: 56px;
  --space-card: 40px;

  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --duration-slow: 400ms;
  --ease-smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
}

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111112;
    --bg-glow: radial-gradient(1200px 520px at 75% -10%, rgba(0, 174, 239, 0.14), transparent 70%);
    --card-bg: #19191b;
    --card-border: rgba(255, 255, 255, 0.08);
    --line: rgba(255, 255, 255, 0.08);
    --text: #ededed;
    --muted: #8f8f99;
    --chip-bg: rgba(255, 255, 255, 0.07);
    --chip-bg-hover: rgba(255, 255, 255, 0.11);
    --stage-bg: linear-gradient(180deg, #1f1f22 0%, #161618 100%);
    --stage-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    --accent-ink: #33c3f5;
    --accent-soft: rgba(0, 174, 239, 0.16);
    --primary-bg: #ededed;
    --primary-bg-hover: #d8d8d8;
    --primary-text: #0d0d0d;
    --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 14px -4px rgba(0, 0, 0, 0.45), 0 18px 40px -12px rgba(0, 0, 0, 0.55);
    --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 26px -6px rgba(0, 0, 0, 0.55), 0 32px 64px -16px rgba(0, 0, 0, 0.7);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

:root[data-theme="dark"] {
  --bg: #111112;
  --bg-glow: radial-gradient(1200px 520px at 75% -10%, rgba(0, 174, 239, 0.14), transparent 70%);
  --card-bg: #19191b;
  --card-border: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.08);
  --text: #ededed;
  --muted: #8f8f99;
  --chip-bg: rgba(255, 255, 255, 0.07);
  --chip-bg-hover: rgba(255, 255, 255, 0.11);
  --stage-bg: linear-gradient(180deg, #1f1f22 0%, #161618 100%);
  --stage-inset: inset 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --accent-ink: #33c3f5;
  --accent-soft: rgba(0, 174, 239, 0.16);
  --primary-bg: #ededed;
  --primary-bg-hover: #d8d8d8;
  --primary-text: #0d0d0d;
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 14px -4px rgba(0, 0, 0, 0.45), 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, 0.45), 0 12px 26px -6px rgba(0, 0, 0, 0.55), 0 32px 64px -16px rgba(0, 0, 0, 0.7);
  --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Headings and layout spacing step down at two breakpoints instead of scaling fluidly. */
@media (max-width: 960px) {
  :root {
    --text-hero: var(--fs-44);
    --text-stat: var(--fs-40);
    --text-h2: var(--fs-32);
    --space-section: 96px;
    --space-chapter: 80px;
    --space-hero-top: 64px;
    --space-hero-bottom: 64px;
    --space-split: 48px;
    --space-panel: 48px;
    --space-block: 48px;
    --space-card: 32px;
  }
}
@media (max-width: 480px) {
  :root {
    --text-hero: var(--fs-40);
    --text-h2: var(--fs-28);
    --space-section: 72px;
    --space-chapter: 64px;
    --space-hero-top: 48px;
    --space-hero-bottom: 48px;
    --space-split: 32px;
    --space-panel: 40px;
    --space-block: 40px;
    --space-card: 24px;
  }
}