:root {
  /* Colour — dark-first, restrained. Checked against WCAG AA on --color-bg. */
  --color-bg: #0b0c0f;
  --color-surface: #15171c;
  --color-card: #1a1c22;      /* work cards: lifted so dark logos read */
  --color-card-glow: #1f2229; /* work cards: centre highlight */
  --color-text: #f4f5f7;
  --color-text-muted: #9aa0ac;
  --color-accent: #5eb1ff;
  --color-border: #2a2e36;
  --color-border-soft: #1c1f25; /* faint hairline, decorative only */
  --canvas-opacity-narrow: 0.4; /* hero network behind text on <768px */

  /* Primary button — indigo-violet. White text 5.6:1; button vs bg 3.5:1, vs surface 3.2:1 */
  --color-button: #5b50e8;
  --color-button-hover: #4a3fd6;
  --color-on-button: #ffffff;

  /* Syntax-style accents — used sparingly for terminal/editor colour cues. All AA-checked on bg/surface. */
  --color-syntax-green: #7ee787;
  --color-syntax-pink: #ff6ac1;
  --color-syntax-amber: #e3b341;
  --color-syntax-purple: #c792ea;
  --color-syntax-cyan: #56d4dd;
  --color-syntax-orange: #ffa657;

  /* Decorative-only traffic-light dots (terminal window chrome), no text-contrast requirement */
  --color-dot-red: #ff5f57;
  --color-dot-amber: #febc2e;
  --color-dot-green: #28c840;

  /* Font family — system stack (chosen over a self-hosted font: zero requests, zero CLS risk) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Terminal chrome only — system monospace, no extra font file/request */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  /* Nav links — Sublime Text's default editor fonts (Menlo on Mac, Consolas on Windows) */
  --font-code: Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --font-weight-regular: 400;
  --font-weight-bold: 700;

  /* Type scale — fluid, clamp(min, preferred, max) */
  --fs-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
  --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --fs-2xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  --fs-3xl: clamp(2.75rem, 1.9rem + 3.8vw, 4.75rem);
  --fs-display: clamp(3rem, 1.6rem + 7vw, 7.5rem); /* hero hook line */
  --tracking-display: -0.03em;

  --line-height-tight: 1.15;
  --line-height-snug: 1.45;
  --line-height-base: 1.6;

  /* Spacing scale — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-egg: 450ms; /* easter egg: dot hop + bubble pop */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Hero kinetic headline: words rise from a mask, dot pops, one light sweep */
  --duration-kin: 700ms;
  --delay-kin: 150ms;
  --stagger-kin: 110ms;
  --ease-kin: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out */
  --duration-kin-sweep: 1100ms;

  /* Layout */
  --content-max-width: 1100px;
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --header-height: 64px;
}