/*
 * Nuit dorée, the visual direction chosen by Arnaud on 09/10/2026: the
 * design tokens of the whole presentation, written here and nowhere else.
 *
 * Every page loads this sheet first. The views of the show (app.css) and
 * the style board of the lab (lab.css) use the tokens; the 3D scenes read
 * them back from the page (static/3d/tokens.js), so that CSS and 3D share
 * one palette and one pace. A test checks that no other file writes these
 * colours.
 *
 * Read on a projector from 20 m, maybe in a room that stays lit: a washed
 * out projector raises the black and flattens the contrast, so the
 * secondary ivory stays light, and no stroke is thinner than 0.25vh (about
 * 3 px on 1080 lines).
 */

/* Atkinson Hyperlegible Next: the text and the figures, everywhere. Its zero
   is slashed, and the font has no other: no OpenType feature removes the
   slash (its tabular zero is the same glyph). */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/static/fonts/AtkinsonHyperlegibleNext-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
}

/* Fraunces: the titles of the public view, and the brand on the laptop.
   Declared here, downloaded only by a page with a rule that uses it: never
   the phone view. */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/Fraunces-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: dark;

  /* Night: the background, then two lifts of it for depth and panels. */
  --bg: #060912;
  --bg-2: #0c1426;
  --bg-3: #13203a;
  /* A surface raised over the night: buttons, cards, dialogs. */
  --raised: #1a2846;

  /* Ivory: the text. The secondary one is light enough to survive a washed
     out projector (it was #cdbfa6 on the style board). */
  --ink: #f6eddd;
  --ink-soft: #e2d6c0;

  /* Gold: accents, rules, the metal of the 3D. */
  --accent: #e4b660;
  --accent-2: #f6dc9e;
  --accent-deep: #a8782e;
  --accent-ink: #1a1206;
  /* Porcelain: the beads and pucks of the 3D. */
  --second: #f2ead9;
  --gold: linear-gradient(176deg, #fbe7b0 8%, #e6b862 46%, #b98436 78%, #e9c27a 100%);

  --panel: rgb(11 18 34 / 0.82);
  --panel-edge: rgb(228 182 96 / 0.5);
  --track: rgb(246 237 221 / 0.16);
  --rule: rgb(228 182 96 / 0.55);
  --shade: rgb(3 5 10 / 0.6);

  /* Signals of the presenter, told by their hue and by their word: on
     time, ahead, late; a warning to read, an alert to act on. */
  --on-time: #5fdc98;
  --ahead: #82c8ff;
  --late: #ff806f;
  --alert-paper: #d0341f;
  --alert-ink: #ffffff;
  --warning-paper: #f4ab3c;
  --warning-ink: #1a1206;
  /* QR codes stay black on white, whatever the theme: phones read them so. */
  --qr-paper: #ffffff;
  --qr-ink: #000000;

  /* Type. Titles at a medium optical size: hairlines thick enough to read
     from the back of the room (at a larger one, the bar of the e fades and
     "et" reads "ct"). The title of the show, in gold, is a little lighter. */
  --text: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, sans-serif;
  --display: "Fraunces", Georgia, serif;
  --display-axes: "opsz" 48, "SOFT" 0, "WONK" 0;
  --display-weight: 560;
  --brand-axes: "opsz" 48, "SOFT" 0, "WONK" 0;
  --brand-weight: 480;
  --caps-tracking: 0.2em;

  /* Sizes of the public view, on the height of a 16:9 projector. */
  --gutter: 7vw;
  --stroke: 0.3vh;
  --size-kicker: 3.6vh;
  --size-title: min(13vh, 6.6vw);
  --size-title-hero: min(8vh, 4.4vw);
  --size-brand-hero: min(13.5vh, 5.6vw);
  --size-footer: 2.8vh;

  /* Motion: slow, nothing moves faster than the eye follows from the back
     of the room. A turn is a change of step, for the titles and the 3D. */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --turn: 1600ms;
  /* The 3D scene glides to its new pose a little longer than the titles. */
  --turn-scene: 2600ms;
  --fade: 900ms;
}