/* REIDEL DJ design tokens: the one source for every colour, face and shared length on djreidel.com.
   Read by index.html, 404.html and the press kit (presskit/*.html, printed by presskit/build.py); the song-request pages and the video
   projects take their values from here too. Change a value here and nowhere else: scripts/check-tokens.mjs fails when one is copied out.
   Names and roles are the ones DESIGN.md uses. */

/* Google Fonts' latin subsets, self-hosted as the variable files, so one file per style covers every weight the page uses;
   swap, so text paints in the fallback face and never waits. A changed font file needs a new file name: vercel.json caches these for a year. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/cormorant-garamond-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("fonts/cormorant-garamond-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Stand-ins for Cormorant while its files load: Georgia (Windows, macOS, iOS) or Noto Serif (Android), scaled to Cormorant's width
   and set on its baseline, so the swap changes the letterforms, not the line breaks. Without them the hero's genre bill wrapped to an
   extra line in Georgia and the whole hero moved when Cormorant arrived (layout shift 0.159 on a throttled phone, 2026-09-28).
   size-adjust is the measured width ratio of the page's own lines (Cormorant over Georgia: italic .79, upright .88); the overrides
   are Cormorant's ascent (.924) and descent (.287) divided by it. Re-measure if the Cormorant files change. */
@font-face { font-family: "Cormorant fallback"; font-style: normal; font-weight: 300 700; src: local("Georgia"), local("Noto Serif"), local("NotoSerif-Regular"); size-adjust: 88%; ascent-override: 105%; descent-override: 32.6%; line-gap-override: 0%; }
@font-face { font-family: "Cormorant fallback"; font-style: italic; font-weight: 300 700; src: local("Georgia Italic"), local("Georgia-Italic"), local("Noto Serif Italic"), local("NotoSerif-Italic"); size-adjust: 79%; ascent-override: 117%; descent-override: 36.3%; line-gap-override: 0%; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Black Card (2026-10-27, replacing Gold Foil): platinum on graphite. The blacks are neutral, so the red of the footage is the only
     warm colour on the page; reading text stays a warm white. The --gold and --foil names are kept as roles (the accent, the metal), so
     every page that reads them, the song-request branch included, takes the new values unchanged. */
  --black: #0b0b0c;
  --black-rgb: 11 11 12;   /* the same black as channels, for the shades over video: rgb(var(--black-rgb) / .82) */
  --black-soft: #151516;
  --band: #1b1b1d;
  --ivory: #eeeae3;
  --muted: #9a978f;
  --dim: #5e5c58;   /* the unlit state of the reading light only, never resting text */
  --gold: #c4c7cc;   /* platinum, the one accent: 10.1:1 or better on every page black */
  --gold-rgb: 196 199 204;   /* the same platinum as channels */
  --gold-line: rgb(var(--gold-rgb) / .55);   /* the edge of anything you can operate (fields, ghost buttons, the pause control): 4.0:1 on every page black, clear of the 3:1 floor for a control's boundary */
  --gold-soft: rgb(var(--gold-rgb) / .35);   /* decorative hairlines: frames, list top rules, the dialog */
  --gold-faint: rgb(var(--gold-rgb) / .15);  /* the quietest separators */
  --red: #d94f45;   /* the one signal colour off the palette: the required-field marks in the booking form only */
  /* the metal, brushed platinum on the Book Reidel button face alone: a 110-degree sweep through the platinum, sized at 220% so hover moves the sheen */
  --foil-light: #f8f9fa;
  --foil-mid: #e3e5e8;
  --foil-deep: #8f949b;
  --foil-warm: #d2d5d9;
  --metal: linear-gradient(110deg, var(--foil-light) 0%, var(--gold) 30%, var(--foil-mid) 50%, var(--foil-deep) 74%, var(--foil-warm) 100%);
  --serif: "Cormorant Garamond", "Cormorant", "Cormorant fallback", Georgia, serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;
  --measure: 34rem;
  --block: clamp(56rem, 75vw, 64rem);   /* the centred blocks' body: 56rem on a laptop, growing with the window to the 64rem the split sections use */
  --pad: clamp(1.25rem, 5vw, 4rem);
}

/* Paper: the documents printed on white (presskit/contract.html, presskit/djreidel-proposal.html), set by <html data-ground="paper">.
   Same type and hairlines; the platinum is darkened to steel to read as small text on paper (7.9:1), the grey is darker (6.0:1). */
:root[data-ground="paper"] {
  --paper: #ffffff;
  --ink: var(--black);
  --muted: #66635e;
  --gold: #4d5259;
  --gold-soft: rgb(77 82 89 / .45);
  --gold-faint: rgb(77 82 89 / .2);
}