/* THE RECORD · storefront TOKENS (colours, type faces, the two registers). Loaded by every page.
   record.css adds the shared components on top; a page with its own component names (the quiz) loads only this file.
   THE RECORD · storefront foundation (row 603, SITE, 3 Oct 2026).
   Source of truth: content/brand_system_2026-10-01/SKILL.md (palette, one job per font) and DAY ENGINE's V4
   HOME RULES token names, so the storefront and the member app read as one product.
   LAWS (do not re-derive by taste):
   1. Two faces only: Instrument Serif (headlines, numbers, facts) and Instrument Sans (everything else).
   2. Red once per view. A view with an action gives the red to the action (.btn); a view without one gives it
      to one italic word in the headline (<em class="red">). The sticky bar is paper, never red, so it never
      doubles the red on screen.
   3. Gold is one line per page: the hero kicker (.kicker.gold). Dark ground only. Never on paper.
   4. No green, no section colours. Done / safe / tick marks are paper on dark, ink on paper.
   5. Two registers, dark (ink ground) and light (paper ground), same role tokens. The visitor's device setting
      picks one, the menu switch overrides it (record.js). Every colour in a page comes from a role token, never a
      raw hex, or the other register breaks. .inv flips one section to the other register.
   6. Photos keep full colour on one grade (.ph). Never desaturated, never darkened to fit.
   7. Tap targets 44px minimum. Spacing steps 10 / 12 / 16 / 24 / 40 / 64. */

:root{
  /* fixed brand values */
  --ink:#141312; --paper:#F3EEE3; --paper-warm:#FBF8F1; --muted:#DAD2C3; --hair:#6B645B;
  /* type */
  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* layout */
  --pad:22px; --maxw:640px; --r-card:16px; --r-pill:999px; --ease:cubic-bezier(.2,.7,.2,1);
}
/* DARK register (default, and what a no-script visitor gets). record.js sets data-theme on <html> before paint
   from the visitor's saved choice, else from the device setting. */
:root,[data-theme="dark"],[data-theme="light"] .inv{
  --ground:#141312; --text:#F3EEE3; --text-2:#DAD2C3; --text-3:#A39B8E;
  --surface:#262523; --surface-done:#201F1D; --float:#2E2D2A;
  --line:rgba(243,238,227,.14); --line-strong:rgba(243,238,227,.35);
  --next:#E04B3F; --on-next:#141312; --red:#E04B3F; --gold:#E3C36A;
  --veil:rgba(20,19,18,.82); --veil-solid:rgba(20,19,18,.98); --veil-0:rgba(20,19,18,0); --veil-1:rgba(20,19,18,.94);
  --shadow-float:0 18px 44px -18px rgba(0,0,0,.7);
  color-scheme:dark;
}
/* LIGHT register (paper). Gold is dark-only: on paper the kicker is solid ink. */
[data-theme="light"],[data-theme="dark"] .inv{
  --ground:#FBF8F1; --text:#141312; --text-2:#6B645B; --text-3:#7A7369;
  --surface:#E6E0D4; --surface-done:#EFEADF; --float:#FBF8F1;
  --line:rgba(20,19,18,.12); --line-strong:rgba(20,19,18,.3);
  --next:#B3261E; --on-next:#FBF8F1; --red:#B3261E; --gold:#141312;
  --veil:rgba(251,248,241,.86); --veil-solid:rgba(251,248,241,.98); --veil-0:rgba(251,248,241,0); --veil-1:rgba(251,248,241,.95);
  --shadow-float:0 18px 44px -20px rgba(20,19,18,.35);
  color-scheme:light;
}
/* .inv = the other register for one section (paper block on a dark page, ink block on a light page) */
.inv{background:var(--ground);color:var(--text);}

/* sans never goes past 600: browsers default bold to 700 */
b,strong,th{font-weight:600;}
/* headings carry no browser bold: serif is 400, a sans label sets its own 500 */
h1,h2,h3,h4,h5{font-weight:400;}
h1 b,h2 b,h3 b,h1 strong,h2 strong,h3 strong{font-weight:inherit;}
/* form controls take the page font, never the browser's Arial */
button,input,select,textarea{font-family:inherit;}