/* ══════════════════════════════════════════════════════════════════════
   THEME — "Modernist"

   This is the only file that names a colour, a font, or a rule weight.
   Everything in style.css reads these variables, so a different design
   direction (Archive, Blueprint) is a matter of replacing this one file
   and swapping the <link> in index.html. Nothing else changes.

   Tokens are taken verbatim from the Modernist design system:
   flat, architectural, set entirely in Archivo — near-mono red on an
   off-white ground, zero corner radius, strong 2px rules.
   ══════════════════════════════════════════════════════════════════ */

/* Archivo, variable 400–800, latin subset, self-hosted (35KB, one file).
   Self-hosted rather than pulled from Google Fonts: one less connection,
   no third-party request from a visitor's browser. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* — roles — */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* The accent against the ground measures 3.76:1 — the design system's own
     note says that is enough for large text, icons and interface chrome, not
     for small copy. The six small accent labels on this page (section
     numbers, stat kickers, READ cues, timeline years, case-study subheads)
     read from this token rather than --color-accent directly. Point it at
     --color-accent-700 (#ae1800, 7.4:1) to clear WCAG AA on all of them;
     the headline accent stays bright either way. */
  --color-accent-text: var(--color-accent);

  /* — tonal ramps —
     Generated in OKLCH on one shared lightness scale, so the same step of
     any role carries the same visual weight. 100–300 for tinted fills and
     hovers, 500 as the base, 700–900 for text on tints and pressed states.
     (This is a mono scheme: there is no second accent role.) */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  /* — type — */
  --font-heading: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body-size: 17px;
  --font-body-leading: 1.6;

  /* — shape —
     The rule weight is a token because it is the system's loudest signal.
     Archive draws 1px hairlines here; Blueprint draws 1px tinted lines. */
  --rule: 2px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* — ground —
     Modernist leaves the ground plain. Archive paints ruled paper lines
     here, Blueprint a mint grid; both are one declaration. */
  --page-texture: none;
  --page-texture-size: auto;

  /* — spacing — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* — layout — */
  --measure: 1240px;
  --gutter: clamp(18px, 4vw, 32px);

  /* — elevation, tuned to the ground — */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}