:root {
  /* Fluid type scale (Utopia-style, ~1.2 min / ~1.25 max, 320→1240px) */
  --step--1: clamp(0.83rem, 0.80rem + 0.16vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.24vw, 1.15rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.44rem);
  --step-2:  clamp(1.44rem, 1.31rem + 0.63vw, 1.80rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.95vw, 2.25rem);
  --step-4:  clamp(2.07rem, 1.80rem + 1.38vw, 2.81rem);
  --step-5:  clamp(2.49rem, 2.10rem + 1.95vw, 3.52rem);

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;

  --radius: 6px;
  --measure: 68ch;

  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-display: "Gloock", Georgia, serif;
}

/* One hue family, two steps, strictly separate jobs:
   --accent    (deep bronze) = interactive only — links, active nav, focus ring.
   --highlight (light amber) = structural — process pills + section headings.
   They are two steps of the same amber ramp, not two hues. Separation is by
   depth: CIELAB dE ~13 in both themes, enough to read as distinct without a
   second colour. Keep the jobs apart — if --accent leaks onto non-interactive
   text, the ramp stops carrying meaning and just looks like two browns.
   --accent-contact (muted blue) = the one exception, reserved for the email and
   LinkedIn links in the sidebar and contact section. It is the only cool colour
   on the page, which is what makes "reach me" findable in a warm monochrome
   layout. Do not reuse it for anything else.
   All three are AA at every size used here, in both themes. */

/* Light (default) */
:root, :root[data-theme="light"] {
  --bg:        #f2eee4;
  --surface:   #e8e3d5;
  --fg:        #1a1a1a;
  --muted:     #62615a;
  --border:    #ded8c9;
  --accent:         #6f4410;
  --highlight:      #8a5a12;
  --accent-contact: #2f5aa8;
}

/* Dark */
:root[data-theme="dark"] {
  --bg:        #0f1524;
  --surface:   #172033;
  --fg:        #e8e6e1;
  --muted:     #9a9a93;
  --border:    #232d44;
  --accent:         #d99a4a;
  --highlight:      #e8b56d;
  --accent-contact: #85a8e6;
}

/* Derived from --highlight so both themes stay in step automatically.
   Fill is 9%, not 12%: on the darker cream a heavier tint closes the gap between
   the pill's background and its own text, and the small pill label needs 4.5:1. */
:root {
  --highlight-fill: color-mix(in srgb, var(--highlight) 9%, transparent);
  --highlight-edge: color-mix(in srgb, var(--highlight) 45%, transparent);
}