/* skrta radio: the one set of tokens, shared by the picture, the pages and the
   studio.

   These are skrta.com's, taken from site/index.html and site/press.html on
   2026-10-30. Before that each of the three stylesheets here carried its own
   copy of an older set, lifted from the site when it was still a Next.js app;
   the site was then pared back on 2026-10-29 ("so it reads as designed rather
   than generated") and the station was left behind. One file now, so the next
   time the site moves this is the only thing to change.

   The names are the site's, not the ones this project used to use: --paper is
   the ground and --ink is what is printed on it, in both themes. The station's
   two theme names stay as they are, because the studio sends them and
   /api/settings validates them:

     void    the dark set    the station's default; the picture is a video
     paper   the light set   the white banner

   The light set is the default here, and the pages follow the device unless
   somebody has used the switch, exactly as the site does. The picture never
   relies on that: index.html prints a theme on both <html> and .stage, and
   radio.js keeps them in step, so the letterbox round the stage is always the
   same colour as the stage.

   The blue is the one accent and it is spent only on what is current: what is
   playing, what is next. Ice lives in the #YYZ #OCA #P4K lockup and nowhere
   else. No shadows, no boxes: hairlines of --rule instead.
*/

:root {
  /* ---- the light set: "paper" ---------------------------------------- */
  --paper: #e5e7e9;
  --paper-2: #d6d9dd;
  --ink: #111316;
  --ink-2: #575c64;
  --rule: rgba(17, 19, 22, .16);
  --blue: #2446d6;
  --ice: #9ccff2;
  --btn-hover: #2c3037;
  color-scheme: light;

  /* ---- the faces ------------------------------------------------------ */
  /* Pirata One is the SKRTA wordmark and nothing else. Big Shoulders is for
     headings and the big figures, always uppercase. Archivo is the rest.
     No monospace anywhere: it reads as machine-written. All three are local;
     see fonts/fonts.css for why that matters to a broadcast. */
  --f-mark: "Pirata One", Georgia, serif;
  --f-head: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --f-text: "Archivo", "Helvetica Neue", Arial, sans-serif;

  /* ---- the measure ---------------------------------------------------- */
  --wrap: 1200px;
  --gl: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));

  /* ---- the station's own, which the site has no counterpart for -------- */
  /* The dither pair the one-bit artwork is printed in, measured off his five
     1-bit covers (BRAND_RESEARCH §8.1). The site screens its wordmark and its
     grain; it never dithers a photograph, so these stay ours. */
  --stipple-light: #EDEDED;
  --stipple-dark: #131313;
}

/* Dark follows the device, unless somebody has asked for paper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="paper"]) {
    --paper: #0f1113;
    --paper-2: #1c1f23;
    --ink: #e7e9ec;
    --ink-2: #9ba1a9;
    --rule: rgba(231, 233, 236, .14);
    --blue: #7d97ff;
    --ice: #8ccaf2;
    --btn-hover: #c9ccd1;
    color-scheme: dark;
  }
}

/* Asked for by name: on <html> from the switch or the query string, and on
   .stage, which is how the picture is dressed while it is live. */
[data-theme="void"] {
  --paper: #0f1113;
  --paper-2: #1c1f23;
  --ink: #e7e9ec;
  --ink-2: #9ba1a9;
  --rule: rgba(231, 233, 236, .14);
  --blue: #7d97ff;
  --ice: #8ccaf2;
  --btn-hover: #c9ccd1;
  color-scheme: dark;
}

[data-theme="paper"] {
  --paper: #e5e7e9;
  --paper-2: #d6d9dd;
  --ink: #111316;
  --ink-2: #575c64;
  --rule: rgba(17, 19, 22, .16);
  --blue: #2446d6;
  --ice: #9ccff2;
  --btn-hover: #2c3037;
  color-scheme: light;
}