:root {
  /* Palette */
  --accent: #7c78a8;
  --blue: #527f9f;
  --deep: #102536;
  --gold: #efc76b;
  --ink: #172f42;
  --line: #d8dee2;
  --muted: #697b89;
  --paper: #f5f4f1;
  --red: #a7483f;
  --violet: #6b668f;

  /* Fonts */
  --font-sans: manrope, arial, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* Typography Scale */
  --step-display: clamp(56px, 9vw, 126px);
  --step-6: clamp(36px, 5vw, 65px);
  --step-5: clamp(24px, 3vw, 38px);
  --step-4: clamp(22px, 3vw, 36px);
  --step-48: 48px;
  --step-32: 32px;
  --step-30: 30px;
  --step-25: 25px;
  --step-24: 24px;
  --step-22: 22px;
  --step-20: 20px;
  --step-18: 18px;
  --step-17: 17px;
  --step-16: 16px;
  --step-1: 15px;
  --step-14: 14px;
  --step-13: 13px;
  --step-12: 12px;
  --step-0: 11px;
  --step-00: 10px;
  --step-09: 9px;
  --step-08: 8px;
  --step-42: 42px;
  --step-code: 10.5px;
  --step-exercise-title: clamp(20px, 2.6vw, 34px);
  --step-skill-title: clamp(30px, 4vw, 60px);
  --step-pull-quote: clamp(20px, 2.5vw, 34px);
  --step-display-wide: clamp(150px, 7vw, 220px);

  /* On-dark palette. These are the values the source actually uses on the
     --ink and --accent surfaces. They are not near-misses of the palette
     above: --muted is a dark-on-light value and is illegible on --ink, and
     --paper is warm where the text over --accent is violet-tinted. Each one
     is the exact hex the legacy stylesheets ship. */
  --ink-muted: #9eb0bb;
  --ink-line: #b8c8d2;
  --ink-code: #c9d5dc;
  --accent-paper: #eceaf5;
  --accent-paper-active: #f0eef8;
  --accent-surface: #5b7098;

  /* Overlays. The percentages are the exact 8-bit alphas the source ships
     (#ffffff24, #ffffff3a, #ffffff40, #ffffff50), not rounded to whole
     numbers — the names are rounded, the values are not. */
  --white-14: rgb(255 255 255 / 14.1176%);
  --white-23: rgb(255 255 255 / 22.7451%);
  --white-25: rgb(255 255 255 / 25.098%);
  --white-31: rgb(255 255 255 / 31.3725%);

  /* Full-guide supporting surfaces. These preserve the exact values from the
     legacy responsive layer; they are deliberately not substitutions from the
     light-background palette. */
  --guide-toolbar-text: #9eabb4;
  --guide-panel-blue: #244760;
  --guide-worker-detail-surface: #edf0f1;
  --guide-tree-rule: #41596b;
  --guide-code-surface: #0b1b27;
  --guide-tree-shadow: #081621;
  --guide-live: #80c69a;
  --guide-live-glow: #80c69a22;
  --guide-grid-line: #ffffff06;
  --guide-tree-border: #527085;
  --guide-tree-node: #112a3b;
  --guide-tree-node-label: #8ca1af;
  --guide-tree-node-muted: #a9b6be;
  --guide-tree-node-hover: #1c425a;
  --guide-gold-glow: #efc76b18;
  --guide-tree-detail-text: #aebbc3;
  --guide-phase-hover: #e8ecee;
  --guide-meter-border: #496274;
  --guide-route-copy: #b5c0c7;
  --guide-skill-hover: #315f80;
  --guide-skill-copy: #c4cdd3;
  --guide-skill-index-hover: #eceff0;
  --guide-provider-copy: #cbd9e1;
  --guide-provider-detail-copy: #b7c7d1;
  --guide-provider-rule: #ffffff2b;
  --guide-effort-surface: #18364a;
  --guide-effort-copy: #aebfc9;
  --guide-effort-active: #e9ecee;
  --guide-effort-active-copy: #eeedf6;
  --guide-builder-surface: #132b3b;
  --guide-builder-rule: #ffffff30;
  --guide-builder-action-copy: #d5dde2;
  --guide-builder-copy: #a9bcc8;
  --guide-builder-border: #344c5d;
  --guide-builder-live-glow: #80c69a20;
  --guide-builder-code: #bed0dc;
  --guide-builder-grid: #ffffff05;
  --guide-verify-rule: #ffffff1f;
  --guide-verify-copy: #bfccd4;
  --guide-verify-code: #0f2230;
  --guide-verify-code-border: #2a4150;
  --guide-accent-rule: #ffffff42;
  --guide-accent-note: #6c6898;
  --guide-accent-copy: #f1f0f7;
  --guide-install-rule: #ffffff2d;
  --guide-install-copy: #b9c8d1;
  --guide-control-border: #ffffff50;
  --guide-exercise-copy: #afbec7;
  --guide-prompt-surface: #19364a;
  --guide-prompt-enhanced: #596f9a;
  --guide-prompt-rule: #ffffff32;
  --guide-prompt-enhanced-copy: #e5e3ef;

  /* Motion. The house curve is the strong ease-out already shipped inline
     across pages (base.css link transitions, the review desk, the rules
     island); naming it here lets new motion extend the same curve instead
     of re-typing near-misses. Durations follow the 150-250ms UI budget in
     .agents/rules/animation.md. */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-press: 160ms;
  --dur-rise: 200ms;

  /* Breakpoints */
  --bp-sm: 560px;
  --bp-md: 800px;
  --bp-lg: 1100px;
  --bp-xl: 1600px;
  --bp-2xl: 2200px;
}
