/*
  Design tokens for rnspencer.com — direction D, "instrument, dark".
  Layout concept: a dark instrument shell where the pixel field lives,
  and light rooms where the work lives. UI never sits on black.

  Fonts: GT America (Grilli Type), licensed for web (self-hosted, up to 50k
  monthly visitors) and served from /fonts. The EULA forbids putting the font
  files in public repositories, so /fonts is gitignored: deploy from a local
  copy (or a private source), and keep visitor analytics running.
*/
@font-face { font-family: "GT America Standard"; src: url("../fonts/GT-America-Standard-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America Standard"; src: url("../fonts/GT-America-Standard-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America Mono"; src: url("../fonts/GT-America-Mono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GT America Mono"; src: url("../fonts/GT-America-Mono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
/* The hero headline and "Say hello." */
@font-face { font-family: "GT America Extended"; src: url("../fonts/GT-America-Extended-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;

  /* Dark shell: the field, scenes, and type only */
  --shell-bg: #121211;
  --shell-ink: #ECE8DF;
  --shell-mute: #9A968C;
  --shell-rule: #34332F;
  --shell-accent: #F07A3E;

  /* Light rooms: where all UI and case study work lives. Warm neutrals, the
     same family as the shell, so the two read as one material. */
  --room-bg: #EDEBE5;
  --room-surface: #FFFFFF;
  --room-ink: #121211;
  --room-mute: #5E5A52;
  --room-rule: #CFCBC1;
  --room-accent: #C2410C; /* the shell's orange, darkened to stay legible on light */

  /* Type: GT America Standard, GT America Mono, and a blackletter for metal mode */
  --font-display: "GT America Standard", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "GT America Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-metal: "Grenze Gotisch", "Old English Text MT", serif;
  --font-hero: "GT America Extended", "GT America Standard", "Helvetica Neue", Arial, sans-serif;

  /* Type scale. Display sizes are fitted to the measure in site.css (hero, close). */
  --t-h2: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);    /* section titles */
  --t-h3: clamp(1.5rem, 1.2rem + 1vw, 2rem);       /* decision headings */
  --t-title: 1.375rem;                              /* list titles (index) */
  --t-lead: clamp(1.25rem, 1rem + 0.55vw, 1.5rem); /* case study leads */
  --t-body-l: clamp(1.0625rem, 0.9rem + 0.35vw, 1.25rem); /* case study body */
  --t-body: 1.0625rem;
  --t-big: clamp(4rem, 2rem + 8vw, 8rem);          /* outcome numbers */
  /* Mono: three sizes only */
  --t-mono-l: 0.9375rem; /* mono you read: intro, chapter lines, contact */
  --t-mono: 0.75rem;     /* labels, readouts, metadata values, notes */
  --t-mono-s: 0.6875rem; /* metadata keys */
  --lh-mono: 1.65;

  /* Space: one scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);
  --edge: 1.25rem;                                /* top inset of every masthead-style header */
  --pad-section: clamp(4rem, 10vh, 7rem);         /* room top and bottom */
  --pad-block: clamp(2.5rem, 6vh, 4rem);          /* between blocks inside a room */
  --aside: 13rem;                                 /* the mono margin column */
  --col-gap: clamp(1.5rem, 4vw, 4rem);
  --measure: 56rem; /* one column width for case study headings, text, and media */

  /* Motion: one duration and ease for every hover and focus change */
  --dur: 180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --cell: 9; /* field grid cell in CSS px, read by field.js */
}
@media (max-width: 40rem) { :root { --cell: 7; } }

/* Light mode (by day in Walnut Creek, or press L): shell and rooms become one
   continuous sheet with one set of inks, so the field simply ends at each room. */
:root.light {
  color-scheme: light;
  --shell-bg: #F3F1EB;
  --shell-ink: var(--room-ink);
  --shell-mute: var(--room-mute);
  --shell-rule: var(--room-rule);
  --shell-accent: var(--room-accent);
  --room-bg: #F3F1EB;
}