:root {
  /* Surface — cool light, never cream */
  --paper: #f5f7fa; /* page background */
  --surface: #ffffff; /* cards, raised panels */
  --surface-sunk: #edf1f6; /* inset wells, code, metric backgrounds */

  /* Ink */
  --ink: #0f1319; /* headlines, primary text */
  --ink-2: #4e5866; /* body text on paper */
  --ink-3: #8a94a3; /* captions, meta, disabled */

  /* Structure */
  --line: #e1e6ec; /* hairlines, card borders */
  --line-strong: #c9d1db; /* dividers that need to register */

  /* Accents — cobalt is the brand, mint is for "flowing / active" only */
  --signal: #2a2fe0;
  --signal-ink: #1f23b8; /* accent text on light, passes AA */
  --signal-wash: #eeeffe; /* tinted backgrounds */
  --mint: #00b894; /* active nodes, live states, diagram flow */
  --warn: #c2410c; /* form errors only */

  /* Elevation — layered and soft, never a single dark blur */
  --lift-1: 0 1px 2px rgba(15, 19, 25, 0.04), 0 2px 8px rgba(15, 19, 25, 0.04);
  --lift-2: 0 1px 2px rgba(15, 19, 25, 0.05), 0 8px 24px rgba(15, 19, 25, 0.06);
  --lift-focus: 0 0 0 3px var(--signal-wash), 0 0 0 1px var(--signal);

  /* Radius — small and consistent; this is instrumentation, not a toy */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* Space — 4px base, only these steps */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Layout */
  --measure: 62ch; /* max prose width */
  --content: 1180px; /* max content width */
  --gutter: clamp(20px, 5vw, 64px);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --t-fast: 140ms;
  --t-mid: 280ms;
  --t-slow: 620ms;
}

/* Added for the Section component's eyebrow marker — see site-design-system skill, "section anatomy".
   The skill text says 2px; that reads as invisible next to 12px uppercase type, so this is 6px
   pending a look in the browser (flagged to the user). */
:root {
  --marker-eyebrow: 6px;
}