/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS
   Every value the rest of the site is allowed to use. Nothing below this file
   invents a colour, a curve or a duration.

   The two-layer contract, in one sentence:
   the STORY layer is loud and may run long, the CHROME layer is quiet and
   never exceeds 300ms. Those are two different sets of durations on purpose.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── fonts, self hosted ────────────────────────────────────────────────────
   No third party request on the critical path, no IP handed to a font host
   before the visitor consented to anything, and the page looks identical
   offline and opened straight off the filesystem.
   Clash Display + Switzer: Indian Type Foundry, ITF Free Font License.
   JetBrains Mono: SIL Open Font License 1.1.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: "Clash Display"; src: url("../fonts/clash-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/clash-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../fonts/clash-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: "JetBrains Mono"; src: url("../fonts/mono-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; }

:root {

  /* ── motion curves ──────────────────────────────────────────────────────
     The built in CSS curves are too weak to read as deliberate. These are
     the strong variants and they are the only three on the site.          */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);    /* anything entering or responding */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* already on screen, moving A to B */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* sheets and panels */
  /* ease-in is never used. It delays the exact moment the eye is on. */

  /* ── chrome durations. the quiet layer. none of these may exceed 300ms ── */
  --t-press:  90ms;
  --t-lang:  160ms;
  --t-nav:   180ms;
  --t-menu:  220ms;
  --t-panel: 260ms;

  /* ── story durations. the loud layer. allowed to be long ── */
  --t-line:   620ms;    /* one line of a headline uncovering */
  --t-scene:  900ms;    /* a mobile panel committing to its end state */
  --t-flip:   520ms;    /* the dossier turning to face the reader */

  /* ── stagger. never outside 30-80ms ── */
  --stag-tile: 45ms;
  --stag-line: 70ms;

  /* ── radius. one system, four steps, no exceptions ──
     pressables 999 / surfaces 18 / media 12 / small controls 8            */
  --r-pill: 999px;
  --r-lg:    18px;
  --r-md:    12px;
  --r-sm:     8px;

  /* ── rhythm ── */
  --gutter: clamp(1.15rem, 4vw, 2.75rem);
  --maxw:   1280px;
  --sec-y:  clamp(4.5rem, 9vh, 7.5rem);

  /* ── type ──
     Tracking is size specific. Large display text takes negative tracking,
     body sits near zero, small caps take positive. One value for all sizes
     is the single most common typographic tell.                           */
  --font-display: "Clash Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.9rem, 8.2vw, 6.5rem);
  --fs-h2:      clamp(2rem, 4.6vw, 3.4rem);
  --fs-h3:      clamp(1.15rem, 2vw, 1.5rem);
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;

  --lh-display: 0.94;
  --lh-h2:      1.04;
  --lh-body:    1.62;

  --tr-display: -0.033em;
  --tr-h2:      -0.024em;
  --tr-body:    -0.003em;
  --tr-micro:    0.16em;

  color-scheme: dark;
}

/* ═══════════════════════════  CHAPTER: NIGHT  ═══════════════════════════
   Black, white, grey. All of the colour is in the dust.

   The rule for this version is a single sentence: the interface has no hue at
   all, and the only colour anywhere comes from the cosmic dust behind it. That
   is why it works. A monochrome page in front of a coloured field reads as
   one deliberate decision; the same page with a tinted accent as well reads as
   two, and the second one always looks like it was added.

   The greys are Apple's, and they are worth copying exactly: #F5F5F7 is not
   white, #A1A1A6 is not "grey 60", and the difference between those two values
   and the obvious ones is most of why their dark pages look calm. Pure #FFF on
   pure #000 is a terminal.

   ── where the accent went ───────────────────────────────────────────────
   --accent is white. Everything that used to be picked out in a colour is now
   picked out by weight, size and space instead, which is the harder and better
   way to do it. The two exceptions are earned, not decorative:

     --yes / --no   approve and reject have to be told apart without reading
     --cal-1..4     four workflows cannot be told apart in four greys

   And the calendar borrows its four from the dust palette below, so even that
   exception is the same colour story rather than a second one.

   ── the dust ────────────────────────────────────────────────────────────
   Five hues, read by js/backdrop.js. They are the only saturated values in
   this file. Each grain picks one by hash and wears it as a halo around a
   near-white core, which is how a coloured star actually looks: the centre
   blows out to white and the colour lives in the glow.
   ═══════════════════════════════════════════════════════════════════════ */

:root,
[data-chapter="night"] {
  --bg:        #000000;
  --bg-2:      #0B0B0C;
  --bg-3:      #161617;
  --surface:   rgba(255, 255, 255, 0.048);
  --surface-2: rgba(255, 255, 255, 0.09);
  --line:      rgba(255, 255, 255, 0.12);
  --line-2:    rgba(255, 255, 255, 0.24);
  /* Apple's exact three. Not #FFF, not #999: the specific values are most of
     why their dark pages read as calm rather than as high contrast. */
  --ink:       #F5F5F7;
  --ink-2:     #A1A1A6;
  --ink-3:     #6E6E73;

  /* the accent is white. Two stops, because nothing lit is a flat fill. */
  --accent:      #F5F5F7;
  --accent-2:    #FFFFFF;
  --accent-ink:  #F5F5F7;
  --accent-soft: rgba(255, 255, 255, 0.11);
  --on-accent:   #08080A;
  --metal: linear-gradient(180deg, #FFFFFF 0%, #F2F2F4 42%, #DEDEE3 100%);

  /* ── the dust, and the only saturated values in this file ── */
  --dust-1: #5FD3EE;   /* cyan */
  --dust-2: #FFC46B;   /* amber */
  --dust-3: #FF87BE;   /* magenta */
  --dust-4: #A98BFF;   /* violet */
  --dust-5: #74E6A8;   /* mint */

  /* The two verdict colours, and the only other hues on the site. Both are
     desaturated to sit inside a black and gold page: a signal green next to
     champagne looks like a traffic light. */
  --yes:      #3E9C6D;
  --yes-ink:  #6FCB9A;
  --yes-soft: rgba(62, 156, 109, 0.16);
  --no:       #B4483F;
  --no-ink:   #E0796E;
  --no-soft:  rgba(180, 72, 63, 0.16);

  /* The calendar, and only the calendar. Four workflows have to be told apart
     at a glance, and four shades of one gold cannot do that. They are pulled
     down in chroma until they read as inks on the same stock rather than as a
     colour picker. */
  /* borrowed from the dust, so the one exception to the monochrome rule tells
     the same colour story as the background instead of opening a second one */
  --cal-1: var(--dust-1);
  --cal-2: var(--dust-2);
  --cal-3: var(--dust-3);
  --cal-4: var(--dust-4);

  --focus:  #FFFFFF;
  --glass:  rgba(0, 0, 0, 0.66);

  /* read by js/backdrop.js. the shader palette lives here with everything
     else, so there is one place a colour is ever written down. */
  /* the two clouds. Barely tinted: the grains carry the colour, the gas only
     has to keep the field from being flat black. */
  --gl-deep: #171C2E;
  --gl-warm: #2A2038;
  --shadow:   0 30px 84px rgba(0, 0, 0, 0.72);
  --shadow-s: 0 8px 26px rgba(0, 0, 0, 0.54);
}

/* ═══════════════════════════  CHAPTER: PAPER  ═══════════════════════════
   Used exactly once, by the dossier. After nine pinned scenes the page
   stops moving and turns to paper, which is what tells a provider that
   this section is a document and not more marketing.
   ═══════════════════════════════════════════════════════════════════════ */

[data-chapter="paper"] {
  /* Not paper white. A document reads as a document because it is still and
     dense, not because it is bleached, and a white slab in the middle of a
     near-black page looks like a different website loaded. This is the same
     family, lifted far enough to say "this part is the record", with the
     warmth turned up a little so it reads as stock rather than as a panel. */
  --bg:        #1D1D1F;
  --bg-2:      #232325;
  --bg-3:      #2A2A2D;
  --surface:   rgba(255, 255, 255, 0.055);
  --surface-2: rgba(255, 255, 255, 0.10);
  --line:      rgba(255, 255, 255, 0.15);
  --line-2:    rgba(255, 255, 255, 0.28);
  --ink:       #F5F5F7;
  --ink-2:     #AEAEB2;
  --ink-3:     #86868B;

  --accent:      #F5F5F7;
  --accent-2:    #FFFFFF;
  --accent-ink:  #F5F5F7;
  --accent-soft: rgba(255, 255, 255, 0.12);
  --on-accent:   #08080A;
  --metal: linear-gradient(180deg, #FFFFFF 0%, #F2F2F4 42%, #DEDEE3 100%);

  --yes:      #46A876;
  --yes-ink:  #7BD2A4;
  --yes-soft: rgba(70, 168, 118, 0.17);
  --no:       #C05046;
  --no-ink:   #E88478;
  --no-soft:  rgba(192, 80, 70, 0.17);

  --cal-1: var(--dust-1);
  --cal-2: var(--dust-2);
  --cal-3: var(--dust-3);
  --cal-4: var(--dust-4);

  --focus:  #FFFFFF;
  --glass:  rgba(29, 29, 31, 0.8);
  --shadow:   0 28px 70px rgba(0, 0, 0, 0.52);
  --shadow-s: 0 6px 20px rgba(0, 0, 0, 0.4);
}