:root {
  /* ---- Base palette (exact values from site/index.html) ---- */
  --paper: #FBFAF8;          /* page background */
  --ink-1: #1C1B19;          /* primary ink: headings, strong text */
  --ink-2: #26241F;          /* editorial serif paragraphs */
  --ink-3: #4A473F;          /* body copy */
  --ink-4: #6E6A61;          /* secondary descriptions */
  --stone-1: #8C887F;        /* wordmark, quiet mono text */
  --stone-2: #948F86;        /* education org labels */
  --stone-3: #A29D93;        /* section eyebrow labels */
  --stone-4: #B0AAA0;        /* sub-labels */
  --stone-5: #B7B2A8;        /* inactive toggle state */
  --stone-6: #CFCAC0;        /* separators (e.g. "/" in EN / NO) */
  --hairline: #EAE7E1;       /* 1px rules between list rows */
  --accent: #2E4A78;         /* indigo — links, cursor, step numbers, hover */
  --accent-underline: rgba(46, 74, 120, 0.4);
  --selection: rgba(46, 74, 120, 0.14);

  /* ---- Semantic aliases ---- */
  --surface-page: var(--paper);
  --text-heading: var(--ink-1);
  --text-editorial: var(--ink-2);
  --text-body: var(--ink-3);
  --text-secondary: var(--ink-4);
  --text-label: var(--stone-3);
  --text-label-quiet: var(--stone-4);
  --text-inactive: var(--stone-5);
  --border-hairline: var(--hairline);
  --link: var(--accent);
}

::selection { background: var(--selection); }