:root {
  --background: #1C1A17;
  --surface: #2A2620;
  --background-deep: #17140F;
  --text: #EDE8DF;
  --text-secondary: #C4BDB0;
  --text-muted: #A39A86;
  --border: #3A352C;
  --accent-brass: #B08D57;
  --accent-brass-hover: #C9A227;
  /* Brass for TEXT only; --accent-brass stays for rules, borders and buttons. */
  --accent-brass-text: #C9A66B;
  --accent-alert: #B5424C;
  /* Overlay on the area photos (multiply): warm tint and top shade. */
  --tone-tint: rgb(176 141 87 / 0.08);
  --tone-shade: rgb(23 20 15 / 0.45);
  /* Underline that marks key phrases: the brand copper (brass), which has its own
     darker value in the light theme; 3:1 or better on the page background. */
  --marker: var(--accent-brass);

  /* The one place green is used: the call button on the contact card.
     Same in both themes; its glyph is white (3:1 checked in
     scripts/check-contrast.mjs). */
  --call-green: #1F9D55;

  /* Frosted-glass buttons on the contact card (web approximation of a
     translucent material; solid fallback under reduced transparency). */
  --glass-bg: rgb(255 255 255 / 0.14);
  --glass-border: rgb(255 255 255 / 0.24);
  --glass-ink: #FFFFFF;

  /* One grotesk in two cuts (after brand.mit.edu), a serif for H1 and the
     top of a post, a mono for footnotes. Text above 20px (1.25rem) is
     --font-display and 20px and below is --font-body; exceptions: H1 and
     .heading-condensed (--font-serif-condensed), post standfirst (--font-serif),
     footnotes (--font-mono). */
  --font-display: 'Inter Tight', Arial, sans-serif;
  --font-body: 'Inter', Arial, sans-serif;
  --font-serif: 'Roboto Serif', Georgia, serif;
  --font-serif-condensed: 'Roboto Serif Condensed', 'Roboto Serif', Georgia, serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;

  /* Type scale: size, leading and tracking per role. */
  --size-h1: clamp(2.75rem, 6vw, 4.5rem);
  --size-h2: clamp(2rem, 4vw, 2.75rem);
  --size-h3: 1.5rem;
  --size-h4: 1.0625rem;
  --size-lead: 1.25rem;
  --size-body: 1.0625rem;
  --size-card: 1rem;
  --size-small: 0.875rem;
  --size-note: 0.8125rem;
  --lh-h1: 1.05;
  --lh-h2: 1.05;
  --lh-h3: 1.15;
  --lh-lead: 1.4;
  --lh-body: 1.55;
  --lh-prose: 1.6;
  --lh-card: 1.4;
  --lh-ui: 1.25;
  --lh-note: 1.3;
  /* Inter Tight already ships tight spacing: no negative tracking anywhere. */
  --ls-h1: 0.005em;
  --ls-h2: 0;
  --ls-h3: 0;
  --ls-note: 0.04em;

  /* Section rhythm: tight on a phone, generous on a desktop. */
  --space-section-y: 4rem;
  --space-section-y-lg: 5rem;
}

:root[data-theme="light"] {
  --background: #F3EFE6;
  --surface: #EAE3D3;
  --background-deep: #FBF9F3;
  --text: #1F1B16;
  --text-secondary: #4A443B;
  --text-muted: #675E4C;
  --glass-bg: rgb(28 26 23 / 0.08);
  --glass-border: rgb(28 26 23 / 0.18);
  --glass-ink: #1C1A17;
  --border: #D9D0BE;
  --accent-brass: #75592F;
  --accent-brass-hover: #5E4727;
  --accent-brass-text: #7A5C2E;
  --accent-alert: #9A3540;
}

/* REVIEW ONLY (kag-tone): steel tone, the cool navy and cognac of the new
   portraits (navy suit, grey studio, brown leather, tan shoes). Chosen in the
   dropdown from js/copy-review.js; when agreed, fold these values into :root
   and the light block above and delete this. */
:root[data-tone="steel"] {
  --background: #161A21;
  --surface: #1F2530;
  --background-deep: #10131A;
  --text: #E9ECF1;
  --text-secondary: #BEC5D1;
  --text-muted: #98A2B3;
  --border: #2D3544;
  --accent-brass: #B9875A;
  --accent-brass-hover: #D29A66;
  --accent-brass-text: #D3A276;
  --tone-tint: rgb(60 92 150 / 0.14);
  --tone-shade: rgb(16 19 26 / 0.5);
}
:root[data-tone="steel"][data-theme="light"] {
  --background: #EEF0F4;
  --surface: #E1E5EC;
  --background-deep: #F8F9FB;
  --text: #141A23;
  --text-secondary: #3A4352;
  --text-muted: #546072;
  --glass-bg: rgb(20 26 35 / 0.08);
  --glass-border: rgb(20 26 35 / 0.18);
  --glass-ink: #141A23;
  --border: #CBD2DD;
  --accent-brass: #8A5A33;
  --accent-brass-hover: #6F4727;
  --accent-brass-text: #8A5A33;
  --tone-tint: rgb(60 92 150 / 0.08);
}

@media (min-width: 768px) {
  :root {
    --space-section-y: 5rem;
    --space-section-y-lg: 6.25rem;
  }
}
@media (min-width: 1100px) {
  :root {
    --space-section-y: 7rem;
    --space-section-y-lg: 8.5rem;
  }
}