/* ==========================================================================
   PULSE — the variables.

   Two families of colour live here and they do different jobs.

   1. THE PALETTE is fixed: the brief's seven colours, written once.

   2. THE GROUND MOVES. --bg and --ink are not constants — assets/js/site/night.js
      writes them on every frame from the ramp in content.js, so the page really
      travels from a warm sunset black at the top, through deep blue, to near
      black at the peak, and back into an afterglow at the release. They are
      declared here with the first stop's values so the page is correct before a
      single line of script runs, and correct forever if script never runs.

      That is deliberately NOT a brightness filter over the document, which is
      the cheap way to do this and looks like a grey sheet: these are real
      colours and the photographs underneath them are untouched.

   3. THE FREQUENCY is scoped, not global. --glow / --wash / --line are retuned
      when an event is selected, but only on the sections that carry [data-freq].
      The brief is explicit that the whole site must not recolour cartoonishly;
      confining the switch to a scope is how that promise is kept structurally
      rather than by being careful.
   ========================================================================== */
:root {
  /* --- the palette, fixed ------------------------------------------------ */
  --night:   #090909;
  --warm:    #14100F;
  --bone:    #F5F0E8;
  --violet:  #7A38FF;
  --coral:   #FF4F57;
  --orange:  #FF7A2F;
  --acid:    #E8FF38;
  --deep:    #101B39;

  /* --- the ground, moved by night.js ------------------------------------- */
  --bg:  rgb(20, 16, 15);
  --ink: rgb(245, 240, 232);

  /* --- the frequency, retuned by frequency.js ---------------------------- */
  --glow: var(--orange);
  --wash: #2A1408;
  --line: var(--bone);

  /* --- derived ------------------------------------------------------------ */
  --ink-dim:   color-mix(in srgb, var(--ink) 58%, transparent);
  --ink-faint: color-mix(in srgb, var(--ink) 26%, transparent);
  --rule:      color-mix(in srgb, var(--ink) 16%, transparent);

  /* --- type -------------------------------------------------------------- */
  --display: 'Archivo Black', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Display sizes are viewport-driven with a floor and a ceiling, because the
     brief asks for typography used as spatial architecture — a headline that
     stops growing at 1440 stops being architecture on a 1920 screen. */
  --t-huge: clamp(3.1rem, 13vw, 12.5rem);
  --t-big:  clamp(2.3rem, 8.2vw, 7.4rem);
  --t-mid:  clamp(1.6rem, 4.2vw, 3.2rem);
  --t-lead: clamp(1rem, 1.5vw, 1.28rem);
  --t-mono: clamp(0.66rem, 0.86vw, 0.78rem);

  /* --- space ------------------------------------------------------------- */
  --gut:   clamp(1.15rem, 4.4vw, 4.5rem);
  --stack: clamp(2.25rem, 5vw, 5rem);
  --wrap:  1440px;

  /* --- motion ------------------------------------------------------------ */
  /* PULSE has two speeds and no third. A CUT is as close to instant as a
     transition can be without being a jump; a SETTLE is what everything does
     after the cut has landed. Nothing on this page eases for half a second. */
  --cut:    120ms cubic-bezier(0.2, 0, 0, 1);
  --settle: 620ms cubic-bezier(0.22, 1, 0.32, 1);
  --snap:   260ms cubic-bezier(0.3, 0, 0, 1);
}