/* 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 one loud color: live-red means live or cut, nowhere else */
  --live: #e5484d;
}

/* ---- 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;
  --border: rgb(255 217 163 / 0.14);        /* tungsten hairlines */
  --border-strong: rgb(255 217 163 / 0.3);
  --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: rgb(255 217 163 / 0.14);
  --hair-35: rgb(255 217 163 / 0.2);
  --hair-48: rgb(255 217 163 / 0.3);
  --hair-60: rgb(255 217 163 / 0.42);
}

/* ---- THE DOOR: the brand anchor ------------------------------------------- */
body.door {
  color-scheme: dark;
  --bg: #030303;
  --surface: #202123;
  --surface-2: #232225;
  --surface-3: #2b292d;
  --frame-mat: #0c0b0a;
  --border: rgb(224 182 105 / 0.18);
  --border-strong: rgb(224 182 105 / 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) */
  --hair-25: rgb(224 182 105 / 0.25);
  --hair-35: rgb(224 182 105 / 0.35);
  --hair-48: rgb(224 182 105 / 0.48);
  --hair-60: rgb(224 182 105 / 0.6);
}

/* ---- 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: rgb(32 33 35 / 0.15);
  --border-strong: rgb(32 33 35 / 0.3);
  --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: rgb(32 33 35 / 0.12);
  --hair-35: rgb(32 33 35 / 0.18);
  --hair-48: rgb(32 33 35 / 0.28);
  --hair-60: rgb(32 33 35 / 0.4);
}