/* Liat.ai v2 tokens, for the scroll-driven homepage.

   Two colours are the brand: green #005F02 and orange #FF6B00. Orange is the
   primary action and the identity marks: the dot in the wordmark, the price,
   the highlighted word, a running timer. The world behind the page still
   reads both off :root to build its palette.

   Words sit on plates. A plate is a solid block of colour with a hard edge,
   hung off the left or the right edge of the screen like a broadcast
   graphic, never floating in space and never fading into the world. Every
   plate colour is a tone of the brand palette, lightened into a pastel where
   the ground is light:

     cream   #F2E3BB  the main plate, where the reader reads
     pale    #D6E6B8  a pastel pitch green, for options and second plates
     gold    #C0B87A  a label plate and the old price
     deep    #003D01  the deeper brand green: headline tabs, the listening
                      deck and the bottom of the page
     green   #005F02  the brand green, for a pressed or hovered deep plate

   Ink is deep green on every light plate and cream on every deep plate.
   There is no black or charcoal text and no near-white ground anywhere
   outside the contact chapter.

   Contrast, measured: deep on cream 9.9:1, deep on pale 9.5:1, deep on gold
   6.2:1, moss on cream 6.2:1, moss on pale 6.0:1, cream on deep 9.9:1, gold
   on deep 6.2:1, on-orange on orange 5.3:1, orange on deep 4.4:1 (large
   type only: the price and the highlighted word).

   The contact chapter ("Send us one match.") is the one place words still
   sit straight on the world, over a soft shade, with chalk ink after dark.
   The owner asked for it to stay as it is, so the old tone tokens below
   (chalk, haze, shade, edge) serve that chapter alone. The world tells the
   page which ink its light needs (textTone) and the page sets data-tone on
   the root. */

/* Registered so they ease when the tone flips. Their initial values are
   transparent, and the real values come from the rules below. */
@property --ink    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --ink-2  { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --ink-3  { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --ground { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --edge   { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --grass   { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --grass-2 { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --wash    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --shade-edge { syntax: '<color>'; inherits: true; initial-value: transparent; }

:root {
  /* ---- The brand ---- */
  --brand-green: #005F02;
  --brand-orange: #FF6B00;

  /* ---- Plates ---- */
  --cream:   #F2E3BB;
  --cream-2: #E8D9AE;
  --pale:    #D6E6B8;
  --pale-2:  #C8DCA4;
  --gold:    #C0B87A;
  --deep:    #003D01;
  --green:   var(--brand-green);
  /* The second ink on a light plate. 6.2:1 on cream. */
  --moss:    #2E5B2F;

  /* ---- Night: the studio ----
     The site cuts between studio and pitch, the way a broadcast does. The
     bar, each page's head, the deep bands, the close and the foot are the
     studio at night; the sections in between keep the light plates above,
     and every change between the two is a hard edge. Ink on night is cream
     (13.3:1), pale (12.8:1) or gold for labels (8.4:1). Orange on night is
     5.9:1. */
  --night:        #0D2111;
  /* The page ground, one plain colour on every page. On 2026-09-16 the
     owner tried a football pitch green here (#2E6B30) and asked for the
     night green back within minutes. */
  --page-ground:  #0D2111;
  --night-deep:   #081609;
  --night-raised: #16301A;
  --night-rule:   #2E4A30;
  --night-hatch:  #22391F;
  /* The hairline round a heading bar. The bar is dark and so is the pitch
     behind the pages, and on three of them the section carries no fill of
     its own, so the bar could end up night on night: --night and the darker
     mowing stripe --mow-a are both #0D2111. The owner said on 2026-09-16
     that the heading was "genuinely not visible because of the same color".
     A cream hairline at 22% composites to about 1.9 to 1 on night, which is
     enough to draw an edge without drawing a line the reader reads as a
     rule. It is not ink and never carries text. */
  --bar-edge: color-mix(in oklab, var(--cream), transparent 78%);

  /* Rules on a light plate. They never carry text. */
  --rule-light: color-mix(in oklab, var(--deep), transparent 74%);
  /* Rules on a deep plate. */
  --rule-deep: color-mix(in oklab, var(--cream), transparent 72%);

  /* ---- The contact chapter's own palette, kept as it was ---- */
  --chalk:   #FAF6EE;
  --chalk-2: #EAE4D7;
  --chalk-3: #D9D1C1;
  --haze:    #FFFBF2;
  --shade:   #0C110E;
  --orange-deep: #B34700;

  /* ---- Orange ---- */
  --orange: var(--brand-orange);
  --orange-hover: #FF8428;
  /* The ink on an orange fill: a green deeper than --deep, because --deep
     on the brand orange is 4.4:1 and this is 5.3:1. */
  --on-orange: #002E01;

  /* Orange used as ink, for the small name inside a card. The value has to
     follow the ground it sits on, because the brand orange is 5.9:1 on
     night and 2.2:1 on cream. A light plate gets the deeper orange, which
     the contact chapter already uses for the same reason, and a dark plate
     puts --accent-ink back to the brand orange. */
  --accent-ink: var(--orange-deep);

  /* The on air light over the homepage headline. Cream on it is 4.6:1. */
  --on-air: #C8102E;

  /* ---- Tone: the ink for words laid straight over the world ----
     Only the contact chapter does that now. By day the ink is deep green;
     after dark it is chalk. The default is day, because the page opens on
     an afternoon. */
  --ink:   var(--deep);
  --ink-2: var(--moss);
  --ink-3: var(--moss);
  --ground: var(--haze);
  /* The hard offset under the contact headline. */
  --edge: color-mix(in oklab, var(--haze), transparent 8%);
  --accent: var(--orange-deep);
  /* How strong the soft shade behind the contact words is, 0 to 1. */
  --veil-a: 0.72;
  --rule: color-mix(in oklab, var(--ink), transparent 78%);
  --focus: var(--deep);

  /* ---- The drawn pitch, shown when the world cannot load ---- */
  --grass: #3E8A34;
  --grass-2: #347A2C;
  --line: color-mix(in oklab, var(--chalk), transparent 12%);
  --wash: color-mix(in oklab, var(--brand-orange), transparent 100%);
  --shade-edge: color-mix(in oklab, var(--shade), transparent 100%);

  /* Media wells: a near-black with no green in it, so a film's own dark
     reads as the same dark. It is a ground for pictures, never for words. */
  --well: #111311;

  /* ---- Type ----
     Oswald shouts, Inter speaks. No monospace: timecodes are Inter with
     tabular numerals. */
  --font-display: Oswald, "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: Inter, "Helvetica Neue", Arial, sans-serif;

  /* Bounds in rem, so a reader's larger default font size is honoured.

     One scale for the whole site, in six steps, and no page redefines any of
     them. A section heading is the same size on the homepage as it is on the
     FAQ. Before 2026-09-16 the pages behind the homepage re-declared these
     tokens smaller, so one class rendered at 50px on the homepage and 35px
     everywhere else, and the closing line came out at 89px against a hero of
     81px. The owner asked for a hierarchy that holds across the site.

       hero   the homepage headline, the largest words anywhere
       h1     the head at the top of a page behind the homepage
       close  the closing call to action, under a page head on purpose
       h2     every section heading, on every page
       h3     a card or a step name
       h4     a small name inside a card

     Measured at 1440px these land at 80, 56, 44, 35, 22 and 17, so each step
     is about a third down from the one above and the order reads without
     measuring. Keep them in that order if you retune them. */
  --fs-hero: clamp(2.5rem, 5.6vw, 5rem);
  --fs-h1: clamp(2rem, 3.9vw, 3.5rem);
  --fs-close: clamp(1.75rem, 3.05vw, 2.75rem);
  --fs-h2: clamp(1.625rem, 2.4vw, 2.25rem);
  --fs-h3-lg: clamp(1.25rem, 1.5vw, 1.5rem);
  --fs-h3: clamp(1rem, 1.2vw, 1.125rem);
  /* Kept as the closing line's old name so nothing that still asks for it
     falls back to an inherited size. It is the same step. */
  --fs-xl: var(--fs-close);
  --fs-lede: clamp(1.1875rem, 1.4vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1.15vw, 1.1875rem);
  --fs-option: clamp(1.3125rem, 1.6vw, 1.625rem);
  --fs-small: 0.9375rem;
  --fs-note: 0.875rem;
  --fs-label: 0.8125rem;
  --fs-ui: 1rem;
  --fs-btn: 1.1875rem;
  --fs-mark: 1.5625rem;
  --fs-name: clamp(1.25rem, 1.6vw, 1.625rem);

  /* ---- Space and frame ---- */
  --bar-h: 64px;
  --gutter: clamp(16px, 4.4vw, 72px);
  --panel-pad: clamp(24px, 3.4vw, 56px);
  --maxw: 1480px;
  --measure: 62ch;

  /* The split column. page.js sets --vw to the layout viewport in pixels and
     --panel-fraction from PANEL_FRACTION in chapters.js, so the column is
     exactly the width the world frames around. */
  --panel-fraction: 0.5;
  --panel-w: calc(var(--panel-fraction) * var(--vw, 100vw));

  /* ---- Motion ---- */
  /* An exponential ease out: fast off the mark, a long settle. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-camera: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-light: 1800ms;
  --dur-tone: 420ms;
  --dur-state: 160ms;
  /* How long each option in detection and analysis is shown before the next
     one. page.js reads it. */
  --rotate-ms: 7000;

  transition:
    --ink var(--dur-tone) ease,
    --ink-2 var(--dur-tone) ease,
    --ink-3 var(--dur-tone) ease,
    --ground var(--dur-tone) ease,
    --edge var(--dur-tone) ease,
    --accent var(--dur-tone) ease,
    --grass var(--dur-light) var(--ease-camera),
    --grass-2 var(--dur-light) var(--ease-camera),
    --wash var(--dur-light) var(--ease-camera),
    --shade-edge var(--dur-light) var(--ease-camera);
}

/* ---- Tone: chalk ink, for dusk and the floodlights ---- */
:root[data-tone="light"] {
  --ink:   var(--chalk);
  --ink-2: var(--chalk-2);
  --ink-3: var(--chalk-3);
  --ground: var(--shade);
  --edge: color-mix(in oklab, var(--shade), transparent 10%);
  --accent: var(--brand-orange);
  --veil-a: 0.62;
  --focus: var(--chalk);
}

/* ---- The drawn pitch follows the light ----
   Only the stand-in pitch changes here. The world does its own light. */
:root[data-light="golden"] {
  --grass: #4A8A2E;
  --grass-2: #3F7C27;
  --wash: color-mix(in oklab, var(--brand-orange), transparent 84%);
}
:root[data-light="dusk"] {
  --grass: #357A30;
  --grass-2: #2D6C29;
  --wash: color-mix(in oklab, var(--brand-orange), transparent 88%);
  --shade-edge: color-mix(in oklab, var(--shade), transparent 45%);
}
:root[data-light="floodlit"] {
  --grass: #3A8434;
  --grass-2: #30742C;
  --shade-edge: color-mix(in oklab, var(--shade), transparent 22%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-light: 400ms; --dur-tone: 200ms; }
}