/* Trivit site — pass 3 tokens
 *
 * The two rooms, the type scale and the geometry, as values rather than a table.
 * Drawn from the app's shipped tokens: the card hues and card geometry are the
 * app's own and must not be re-picked here.
 *
 * Dark is the default room; light is the alternate. The room switch stores a
 * choice which wins over the media query from then on — apply the stored value
 * on <html> before first paint so there is no flash of the wrong room.
 */

:root {
  /* --- the dark room, default --- */
  --g: #191614;          /* page ground */
  --g2: #211D1A;         /* the day strip, and the share preview block */
  --ink: #F2EEE7;
  --dim: #A9A199;        /* 7.07:1 on --g */
  --hair: #39342F;
  --chev: #8B837A;       /* dashed empty chips — 4.83:1 on --g */
  --teal: #2F9686;       /* the pill fill. Never #4FC9B6. */
  --teal-edge: #227064;  /* the pill's 1px bottom border */
  --onteal: #12100E;

  /* --- How to play's board, taken from the app's own dark palette ---
   *
   * --accent is the app's `accent`, #4FC9B6, and it does not contradict the
   * note on --teal above: that one is a pill FILL, this one is TEXT. The app
   * splits them for exactly that reason -- #2F9686 would be 3.34:1 under the
   * serif hero, where a 4.5:1 floor applies, and white on #4FC9B6 would be
   * 2.03:1 inside a pill. Two jobs, two values.
   *
   * The rest are the app's controlTrack, controlFace, validText and
   * invalidText, so the page a player meets in a browser is drawn in the same
   * colours as the screen it is teaching. */
  --accent: #4FC9B6;
  --track: #332F2B;      /* a segmented control's groove */
  --face: #524B42;       /* the chosen segment, sitting in it */
  --ok: #5CD0BD;         /* a trait that passes */
  --no: #F08D79;         /* one that fails */
  --onink: #6B645F;      /* secondary text ON an ink-filled control, so it inverts */

  /* --- the cards. Identical in both rooms, by rule. --- */
  --card: #FFFFFF;
  --cardline: #E2DCD0;
  --hue-teal: #009988;
  --hue-red: #CC3311;
  --hue-indigo: #332288;
  --tag-face: #E7E5E4;   /* the corner letter on a found card */
  --tag-ink: #57534E;    /* 6.4:1 on --tag-face */

  /* --- type --- */
  --ui: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --ed: "Instrument Serif", Georgia, serif;

  /* display, Archivo 900 */
  --t-statement: 88px;   /* front page, line-height .96, tracking -.045em */
  --t-page: 72px;        /* Support, Privacy heads, line-height .98, -.045em */
  --t-page-2: 64px;      /* How to play head, line-height 1, -.045em */
  --t-head: 52px;        /* Feedback, Closed test, line-height 1, -.04em */
  --t-figure: 78px;      /* the end-of-board figure, tabular, -.045em */
  --t-panel: 52px;       /* Feedback heads, and the tip amounts */
  --t-numeral: 52px;     /* the check's 1 2 3 */
  --t-section: 28px;     /* How's section titles, 700, -.025em */
  --t-serif: 28px;       /* the one italic line above each head */

  /* interface */
  --t-wordmark: 23px;    /* 900, -.04em */
  --t-lede: 17px;        /* 1.65 */
  --t-body: 15px;
  --t-small: 13px;
  --t-caps: 11px;        /* 700, letter-spacing .22em, uppercase */

  /* --- geometry --- */
  --strip-h: 40px;
  --wrap: 1344px;
  --pad: 48px;
  --col-play: 393px;     /* the board column. Never grows. */

  --card-w: 115px;       /* the board card */
  --card-h: 138px;
  --card-gap: 8px;
  --card-r: 14px;
  --hero-w: 260px;       /* the front page stack */
  --hero-h: 312px;
  --hero-r: 26px;
  --hero-tilt: 8deg;
  --tip-r: 22px;
  --chip: 26px;
  --chip-r: 7px;
  --tag: 15px;
  --tag-r: 4px;

  --pill-h: 56px;
  --pill-pad: 36px;
  --pill-r: 28px;
  --field-h: 52px;
  --field-r: 14px;

  /* --- motion --- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  /* The mark becoming the cards, once, delayed 150ms. --intro is the length of
   * one card's rise and fade; --intro-gap is how long the next one waits, so
   * the three arrive left to right rather than together. Nothing else reads
   * either token -- only .fan .tc and .introshape in styles-v3.css.
   *
   * Chosen on the device against a live dial, not by taste at a distance. Four
   * settings were measured and all four were liked; these are kept so revisiting
   * this starts from numbers rather than from scratch:
   *
   *   1100ms  gap 1025ms  ease out   settled 3.1s   three placements, crisp
   *   3000ms  gap  575ms  linear     settled 4.2s   one slow bloom
   *   5900ms  gap  575ms  expo out   settled ~2.4s  quick spread, then stillness
   *   5000ms  gap  800ms  expo out   settled ~4.5s  three arrivals, soft  <- this
   *
   * "Settled" is measured, not nominal, and the two differ wildly on this
   * curve: at 5900ms the card has 92% of its travel behind it by 1.6s and
   * spends the remaining four seconds moving a third of a pixel. That is why
   * the 5900ms option looks FASTER than the 3000ms one, and why the gap does
   * more work here than the duration -- at 800ms, card three does not start
   * until card one is 90% arrived.
   *
   * It runs on every load, not once per visitor. Deliberate, and the same
   * question the app's splash carries: someone on their fortieth visit has sat
   * through it thirty-nine times. A sessionStorage flag is the fix if it ever
   * grates. */
  --intro: 5000ms;
  --intro-gap: 800ms;
  --review: 200ms;       /* a trio quieting to .30 while another is reviewed */
  --state: 160ms;        /* chip and selection changes */
  --press: 120ms;        /* scale .96–.97 */
  --dim-review: .30;
  --dim-missed: .62;     /* a revealed trio in the end-of-board panel */
}

/* The alternate room. Cards, cardline, hues and tag colors are absent on
 * purpose — they do not change. */
:root[data-room="light"] {
  --g: #F0ECE4;
  --g2: #E7E0D2;
  --ink: #1C1917;
  --dim: #6B645F;        /* 4.93:1 on --g */
  --hair: #D2C9B9;
  --chev: #8A8279;       /* 3.21:1 on --g */
  --teal: #00786A;
  --teal-edge: #005F54;
  --onteal: #FFFFFF;
  /* How to play's board, from the app's light palette. --accent and --teal
     agree here; only the dark room needs them apart. */
  --accent: #00786A;
  --track: #E3E0DB;
  --face: #FFFFFF;
  --ok: #00786A;
  --no: #A32A1B;
  --onink: #BFB9AF;
}

/* Follow the browser until someone touches the switch. Once they do,
 * data-room is set and wins over this. */
@media (prefers-color-scheme: light) {
  :root:not([data-room]) {
    --g: #F0ECE4;
    --g2: #E7E0D2;
    --ink: #1C1917;
    --dim: #6B645F;
    --hair: #D2C9B9;
    --chev: #8A8279;
    --teal: #00786A;
    --teal-edge: #005F54;
    --onteal: #FFFFFF;
    --accent: #00786A;
    --track: #E3E0DB;
    --face: #FFFFFF;
    --ok: #00786A;
    --no: #A32A1B;
    --onink: #BFB9AF;
  }
}

/* How to play sets the bone room on its body regardless of the page room:
 * the head is dark and holds the statement, the body is for reading. */
.room-bone {
  --g: #F0ECE4;
  --g2: #E7E0D2;
  --ink: #1C1917;
  --dim: #6B645F;
  --hair: #D2C9B9;
  --chev: #8A8279;
}

/* Focus is themed everywhere, never the browser default. */
:where(a, button, [role="button"], input, textarea):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --intro: 0ms;
    --intro-gap: 0ms;
    --review: 0ms;
    --state: 0ms;
    --press: 0ms;
  }
}