/* AKINTADE production tokens: one paper world, one grid, one type scale. Cinema is a guest.
   Colours, faces and motion are the locked P4 / motion-prototype values (05-Motion-Prototype/css/base.css).
   What is new here is only how the system grows past 1440 px (BUILD-SPEC section 2):
   - below 1905 px wide every token resolves to exactly the prototype's value, so the locked layouts are unchanged;
   - type is set in rem, so a reader's own text size setting enlarges it (WCAG 1.4.4);
   - from 1920 px the type grows in steps (root size tiers below), display faces a little more than text;
   - margins and gutters keep growing as a share of the page, both capped, and the page itself stops at
     --page-max, centred, so an ultra-wide screen gets paper margins rather than longer lines. */

:root {
  --paper: #ECE5D7;
  --paper-2: #E4DCCB;
  --paper-3: #D6CCB8;
  --ink: #1F1E1B;
  --ink-2: #47433C;
  --ink-3: #4E4A42;            /* small labels. #6E685D measured 3.9:1 (as low as 3.0 on the darker plates) against the paper as
                                  actually drawn, its mottling included; this passes 4.5:1 on every label, measured on the real
                                  pixels (qa/labels_contrast.cjs, P03 report). P4 began at #7C766A. */
  --hair: rgba(31, 30, 27, 0.20);
  --grid: rgba(31, 30, 27, 0.055);
  --accent: #2F5C52;           /* verdigris: pins and state only */

  --cinema: #121614;
  --on-cinema: #E8E2D5;
  --on-cinema-2: #A9A497;
  --glass: rgba(255, 255, 255, 0.03);
  --glass-edge: rgba(255, 255, 255, 0.08);

  /* the three families, self-hosted (css/fonts.css declares them and holds their real weights) */
  --serif: "Newsreader Display", "Times New Roman", serif;
  --sans: "Geist", Arial, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;

  /* ---- the page and its grid ---- */
  --page-max: 3000px;                                   /* content never spreads wider than this, centred */
  --page: min(100vw, var(--page-max));
  --m-base: clamp(16px, 3.4vw - 9px, 40px);             /* the prototype's margin: 16 on phones, 40 from 1440 */
  /* past 1905 px the margin follows the page at 2.1 percent, capped at 80; beyond --page-max the paper either
     side of the page is added to it, so every "left: var(--m)" in the code still lands on column 1 */
  --m: calc((100vw - var(--page)) / 2 + min(max(var(--m-base), var(--page) * 0.021), 80px));
  /* gutter: the prototype's 16 to 24, then 1.25 percent of the page past 1920, capped at 48 */
  --g: min(max(clamp(16px, 0.8vw + 12.5px, 24px), var(--page) * 0.0125), 48px);
  --u: calc((100% - 2 * var(--m) + var(--g)) / 12);   /* one column plus one gutter, inside a full-width block */
  --nav-h: 88px;                                        /* the nav band (64 px on phones, see base.css) */

  /* ---- type: every size in rem; display faces carry an extra step on large screens ---- */
  --display-boost: 1;
  --fs-hero: clamp(4rem, 8.2vw, calc(7.375rem * var(--display-boost)));        /* 64 to 118 at 1440 */
  --fs-hero-phone: clamp(3.125rem, 14.2vw, 4.5rem);                            /* 50 to 72 */
  --fs-section: clamp(2.125rem, 3.4vw, calc(3.125rem * var(--display-boost))); /* 34 to 50 */
  --fs-label: 0.65625rem;     /* 10.5 */
  --fs-body: 1rem;            /* 16 */
  --fs-small: 0.84375rem;     /* 13.5 */
  --fs-link: 0.875rem;        /* 14 */
  --fs-wordmark: 0.75rem;     /* 12 */
  --measure: 32rem;           /* reading text: about 61 characters a line on average (median 61), measured 7 Oct 2026 in
                                 Geist 440 at 1440 (qa/p06/fonts/measure-cpl.cjs); Neue Haas Grotesk Text gave the same, 61.3 */

  /* ---- the artefact and its loupe: caps grow with the tiers (the stage still fits them to its own box) ---- */
  --pw-max: 390px;
  --loupe-max: 300px;

  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --t-type: 900ms;  --t-type-out: 520ms;  --stagger: 80ms;
  --t-rule: 1100ms; --t-micro: 420ms;

  color-scheme: light;
}

/* The 1920 step. Root size is a percentage, so it multiplies the reader's own default size, never replaces it.
   Above 1920 px the large-canvas system in css/large.css takes over from these values, continuously. */
html { font-size: 100%; }
@media (min-width: 1920px) {
  html { font-size: 106.25%; }
  :root { --display-boost: 1.08; --pw-max: 460px; --loupe-max: 340px; }
}