:root {
  color-scheme: dark;

  /* Colors */
  --color-ink: #f4f4f5;
  --color-muted: #a1a1aa;
  --color-paper: #0d0f12;
  --color-paper-deep: #050507;
  --color-panel: rgb(12 13 18 / 72%);
  --color-panel-soft: rgb(12 13 18 / 58%);
  --color-panel-strong: rgb(6 7 11 / 88%);
  --color-panel-elevated: rgb(5 5 7 / 78%);
  --color-panel-flat: #111117;
  --color-line: rgb(124 93 216 / 22%);
  --color-line-hover: rgb(167 139 250 / 35%);
  --color-line-strong: rgb(167 139 250 / 54%);
  --color-line-faint: rgb(167 139 250 / 12%);
  --color-line-soft: rgb(255 255 255 / 10%);
  --color-violet: #a78bfa;
  --color-violet-strong: #8b5cf6;
  --color-violet-glow: rgb(76 29 149 / 34%);
  --color-violet-wash: rgb(167 139 250 / 16%);
  --color-violet-wash-soft: rgb(167 139 250 / 18%);
  --color-violet-wash-mid: rgb(167 139 250 / 24%);
  --color-violet-deep: rgb(139 92 246 / 24%);
  --color-amber: #fcd34d;
  --color-amber-wash: rgb(252 211 77 / 10%);
  --color-cyan-wash: rgb(36 157 175 / 26%);
  --color-cyan-wash-soft: rgb(34 211 238 / 18%);
  --color-scrim: rgb(13 15 18 / 92%);
  --color-scrim-soft: rgb(8 8 12 / 55%);
  --color-live: rgb(52 211 153 / 70%);
  --color-live-wash: rgb(52 211 153 / 12%);
  --color-live-ring: rgb(52 211 153 / 45%);
  --color-live-ring-fade: rgb(52 211 153 / 0%);

  /* Backgrounds */
  --background-paper: radial-gradient(
    ellipse at 50% 0%,
    var(--color-violet-glow),
    var(--color-scrim) 42%,
    var(--color-paper-deep) 100%
  );

  /* Shadows */
  --shadow-elevated: 0 1.5rem 4.375rem rgb(0 0 0 / 46%);
  --shadow-soft: 0 0.5rem 1.5rem rgb(0 0 0 / 22%);
  --shadow-deep: 0 1.5rem 4.375rem rgb(0 0 0 / 78%);

  /* Radii */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-full: 62.4375rem;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-gutter: 1.5rem;
  --space-header: 4.5rem;

  /* Type scale — fluid ramps (min, preferred grows with viewport, max cap),
   * the same responsive pattern the content pages use. Modest caps so the page
   * reads as a document, not a billboard. */
  --font-h1: clamp(2.5rem, 1.9rem + 2vw, 3.9rem);
  --font-h2: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --font-lede: clamp(1rem, 0.92rem + 0.35vw, 1.0625rem);
  --font-body: 1rem;
  --font-body-lg: 1.0625rem;
  --font-label: 0.8125rem;
  --font-label-sm: 0.75rem;
  --font-code: 0.875rem;
  --font-family-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", "Fira Code", monospace;

  /* Layout */
  --layout-shell: 75rem;
  --layout-measure: 44rem;

  /*
   * Layout primitives the stylelint value/unit lists reject as literals but
   * that the design genuinely needs. Naming the value as a token both satisfies
   * the gate (it inspects the literal, not the token) and documents intent, so
   * the real rendered value is preserved with no rule suppression.
   */
  --layout-pin: fixed; /* full-viewport pinned backdrop / cursor layer */
  --layout-clip: hidden; /* clip children to a rounded frame */
  --layout-grid-halves: minmax(0, 50%) minmax(0, 50%);
  --layout-grid-single: minmax(0, 100%);

  /* Z layers */
  --z-grid: 0;
  --z-base: 1;
  --z-header: 10;
}

/* Full-viewport overlay for the shared gold cursor trail (cursor.js). Lives in
   tokens.css so every page that links it gets the trail, not just the home page. */
.cursor-canvas {
  position: var(--layout-pin);
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-header);
}