/* BackstagePass design tokens — the WIRE round (2026-08-19 overnight).
   Source: design-imports/WIRE-Directions.html ("The Wire with live room"),
   which supersedes the 08-19 Marquee/Gilt pair where they conflict
   (DESIGN-FEATURE-RECONCILIATION.md §0). Three moods, one component
   vocabulary:

     body            HOUSE LIGHTS — the product. Studio, rooms, replays,
                     receipts, clips, the roster: warm near-black #0b0a09,
                     tungsten #ffd9a3 as the house light (not brand gold),
                     IBM Plex Mono for every number, live-red only when
                     something is live or cut.
     body.door       THE DOOR — public/sales/auth/fan-facing brand surfaces:
                     #030303 canvas, the gold family from
                     BRAND-ANCHOR-OVERSKILL.md, graduated gold hairlines,
                     gold fills only on the one CTA per screen.
     body.paper      PAPER — the covenant and the fine print (/trust, legal,
                     the ownership-proof band): #F1F2F4, ink #202123, deep
                     gold #b8860b for the accent only.

   One display voice everywhere: Big Shoulders Display (condensed marquee
   caps) over Archivo body and IBM Plex Mono numbers. Components are defined
   once in application.css against these variables — a mood is a token flip,
   never a parallel stylesheet. */

@font-face {
  font-family: "Big Shoulders Display";
  src: url("/fonts/design/big-shoulders-display-var.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/design/archivo.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/design/plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/design/plex-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/design/plex-mono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* type voices — shared by all three moods */
  --display: "Big Shoulders Display", "Arial Narrow", "Helvetica Neue", sans-serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* motion — the brand curve everywhere (BRAND-ANCHOR) */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 500ms;

  /* print geometry — hairlines, not boxes; WIRE radii: 6 controls, 10 cards */
  --radius: 10px;
  --radius-sm: 6px;

  /* THE WHOLE-PIXEL RULE (r8, 2026-09-03) — why hairlines looked "rough".
     Chrome pixel-snaps a SQUARE 1px border but antialiases a ROUNDED one as a
     path. So a pill (radius 999px) whose border box lands on a fractional y
     gets its 1px hairline painted as TWO rows at ~50% coverage each — and at
     0.3 alpha over a near-black canvas that is 48/255 instead of 84/255: the
     top edge of the pill reads as grit while the bottom edge reads as a line.
     Measured on /studio/lives at dPR 1 and 2 (r8 PR body has the crops).

     Nothing here was fractional on purpose. The type scale is fractional rem
     (0.95rem = 15.2px) times a unitless line-height (1.55), so EVERY line box
     is fractional (23.56px) and every block below it sits on a fraction — 430
     of the 444 boxes on the Lives board did.

     So: a line-height is now a RATIO in `--lh` (it inherits exactly as a
     unitless line-height does), and `--lh-snap` turns that ratio into a
     WHOLE-PIXEL length against the element's own font-size. `1em` and
     `var(--lh)` both resolve at the point of USE, so one token snaps every
     element. application.css applies it universally; every rule that carries
     its own leading writes `--lh: N; line-height: var(--lh-snap)`.

     Rules that follow from it, for anything new:
       * a ratio goes in `--lh`, never in `line-height` — a bare
         `line-height: 1.05` computes to a LENGTH and its children inherit that
         length instead of the ratio;
       * one stroke mechanism per element (a border OR an inset shadow OR an
         outline — never two, and never a control's box under another one:
         that is what made the masthead avatar a wobbly polygon);
       * give a stroked pill/avatar an INTEGER height, so the box it snaps to
         is the box it was drawn as. */
  --lh-snap: round(calc(1em * var(--lh, 1.55)), 1px);

  /* THE ROUND HAIRLINE IS TWO DEVICE PIXELS (r9, 2026-09-03) — the other half
     of "why do the pills still look rough", measured after r8 had already
     landed every box on a whole pixel.

     r8 fixed the STRAIGHT runs: Chrome snaps an axis-aligned 1px border to one
     device row at full strength, and it does that at dPR 1 and 2 alike
     (verified: one row at 84/255 on an 11/255 canvas, both edges equal). What
     it cannot snap is the ARC. On a 999px-radius pill the whole left and right
     end IS arc, and where that arc runs diagonally a 1-device-pixel stroke is
     split across two pixels at roughly half coverage each — so the line's peak
     luminance HALVES as it goes round the corner. Measured around the
     perimeter of the Lives board's pills:

       dPR 1, 1px:  peak 30..75  (sd 10.6 on a mean of 64 — 16%)
       dPR 2, 1px:  peak 61..75  (sd  1.3 on a mean of 75 —  2%)

     A line whose weight changes as it turns is what the eye calls hand-drawn,
     and it is worse than either number suggests on a SCALED Retina display
     ("More Space"), where macOS renders at 2x and resamples the framebuffer
     down — the owner's own r9-ref-1 is ~1.77x, and reproducing that resample
     over our own render gives 55..87 (sd 6.2) plus Lanczos ringing that dips a
     pixel BELOW the canvas beside the line. That ring is the grit.

     Two device pixels is the cure, because then every point on the arc always
     contains one fully-covered pixel. So the hairline's WIDTH is a token: 1px
     where a device pixel is a CSS pixel, 1.5px (three device rows) once there
     are two to spend. Resampled at 1.77x that measures 55..61, sd 1.3 — a 4.8x
     improvement in the one number that means "rough".

     It is spent on the FULLY-ROUND strokes only (the pills, the chips, the
     circles, the avatar's ring). A 6px or 10px radius is straight run almost
     everywhere and Chrome snaps all of it; paying for those would thicken half
     the product to fix four corners nobody can see. */
  --hair-w: 1px;

  /* the one loud color: live-red means live or cut, nowhere else */
  --live: #e5484d;
}

@media (min-resolution: 1.5dppx) {
  :root { --hair-w: 1.5px; }
}

/* ---- HOUSE LIGHTS (default): the product, lights down ---------------------- */
body {
  color-scheme: dark;
  --bg: #0b0a09;             /* the house, warm near-black */
  --surface: #17130e;        /* the raised booth */
  --surface-2: #1c1712;
  --surface-3: #221c15;
  --frame-mat: #0d0c0a;
  /* OPAQUE HAIRLINES (r9). A hairline was tungsten at an alpha, which means
     its painted colour was a function of whatever it happened to sit on AND
     of the antialiasing coverage — the two multiply, so a half-covered pixel
     on an arc came out at half of an already-thin 0.14. Every hairline token
     is now the composite it used to resolve to over THIS mood's canvas, laid
     down opaque, so coverage is the only variable left. (A hairline on a
     raised card is a few levels dimmer than it was; on the canvas, where
     nearly all of them are, it is identical.) The old alphas are kept in the
     comments — they are the recipe if a canvas ever moves. */
  --border: #2d271f;         /* was tungsten @ 0.14 */
  --border-strong: #544837;  /* was tungsten @ 0.30 */
  --text: #f4ede1;           /* stage paper */
  --muted: rgb(244 237 225 / 0.62);
  --dim: rgb(244 237 225 / 0.45);
  --accent: #ffd9a3;         /* the house light — tungsten, not brand gold */
  --accent-soft: #ffe6c2;
  --accent-deep: #b8860b;
  --gold: #e0b669;           /* money and the Pass, nothing else */
  --gold-bright: #f0d59a;
  --gold-ink: #171207;
  --ok: #8fb5a0;             /* "connected" */
  --warn: #d5a13d;
  --btn-bg: #ffd9a3;         /* the primary action is a tungsten block */
  --btn-fg: #0b0a09;
  --btn-hover: #ffe6c2;
  --input-bg: rgb(255 217 163 / 0.05);
  --hair-25: #2d271f;        /* tungsten @ 0.14 */
  --hair-35: #3c3328;        /* @ 0.20 */
  --hair-48: #544837;        /* @ 0.30 */
  --hair-60: #71614a;        /* @ 0.42 */
  /* the coloured hairlines, same rule: a chip's stroke is its own colour at
     55% over the canvas, laid down opaque. */
  --hair-gold: #80693e;
  --hair-ok: #54685c;
  --hair-warn: #7a5d26;
  --hair-live: #832c2e;
}

/* ---- THE DOOR: the brand anchor ------------------------------------------- */
body.door {
  color-scheme: dark;
  --bg: #030303;
  --surface: #202123;
  --surface-2: #232225;
  --surface-3: #2b292d;
  --frame-mat: #0c0b0a;
  --border: #2b2315;         /* gold @ 0.18 over #030303 */
  --border-strong: #504227;  /* @ 0.35 */
  --text: #f2f0ea;
  --muted: rgb(242 240 234 / 0.65);
  --dim: rgb(242 240 234 / 0.45);
  --accent: #e0b669;         /* at the door, the gold IS the accent */
  --accent-soft: #ecc57e;
  --accent-deep: #b8860b;
  --gold: #e0b669;
  --gold-bright: #f0d59a;
  --gold-ink: #030303;
  --ok: #4ade80;
  --warn: #d5a13d;
  --btn-bg: var(--gold);     /* gold fills only on the one CTA */
  --btn-fg: #030303;
  --btn-hover: #f0d59a;
  --input-bg: #121213;
  /* the graduated gold hairline — the signature (BRAND-ANCHOR), now opaque
     at the same four steps it always resolved to over #030303 */
  --hair-25: #3a301c;
  --hair-35: #504227;
  --hair-48: #6d5934;
  --hair-60: #886e40;
  --hair-gold: #7d653b;
  --hair-ok: #2a7b48;
  --hair-warn: #765a23;
  --hair-live: #7f292c;
}

/* ---- PAPER: the covenant and the fine print -------------------------------- */
body.paper {
  color-scheme: light;
  --bg: #F1F2F4;
  --surface: #ffffff;
  --surface-2: #eeeef0;
  --surface-3: #e6e6e9;
  --frame-mat: #ffffff;
  --border: #d2d3d5;         /* ink @ 0.15 over #F1F2F4 */
  --border-strong: #b2b3b5;  /* @ 0.30 */
  --text: #202123;
  --muted: rgb(32 33 35 / 0.65);
  --dim: rgb(32 33 35 / 0.45);
  --accent: #b8860b;         /* deep gold reads on paper */
  --accent-soft: #a9873f;
  --accent-deep: #8a6a1e;
  --gold: #b8860b;
  --gold-bright: #a9873f;
  --gold-ink: #171207;
  --ok: #16a34a;
  --warn: #a9612e;
  --btn-bg: #202123;         /* ink block on paper */
  --btn-fg: #F1F2F4;
  --btn-hover: #35363a;
  --input-bg: #ffffff;
  --hair-25: #d8d9db;
  --hair-35: #cbccce;
  --hair-48: #b6b7b9;
  --hair-60: #9d9ea0;
  --hair-gold: #d2b774;
  --hair-ok: #79c796;
  --hair-warn: #c9a287;
  --hair-live: #ea9498;
}