/* ═══════════════════════════════════════════════════════════════════════════════════════════
   BLACK CROWN - "STONE AND TRIM". The one token sheet for the command room (/command, app.css)
   and the public site (/, site.css). Loaded FIRST; both sheets point their own variable names at
   these, so a colour, a size or a corner changes here and nowhere else.
   Spec: _design/site-revamp-20260924/3-ui.md §3. Decisions (0-plan.md) are final:
   - DARK ONLY. Solid charcoal stone, no glass, no blur (backdrop-filter is also banned in NUI).
   - GOLD IS JEWELLERY: a 1px trim line and ONE solid gold button per screen. Never a wash, a
     glow, a gradient text fill or a chip fill.
   - Cinzel for titles, Barlow for everything read, Barlow Semi Condensed for labels. No mono.
   - Cut corners (chamfer), not rounded ones. Circles only for avatars.
   - 14px is the floor, 48px is the touch target, and the page stands still.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;

  /* ── stone: solid surfaces, darkest first ── */
  --stone-0: #070706;      /* the page */
  --stone-1: #0E0D0B;      /* raised: rail, plates */
  --stone-2: #16140F;      /* inputs, sheets, a row under the pointer */
  --stone-3: #1F1C16;      /* pressed / the selected row */
  --rule: #2B271F;         /* hairline between things */
  --rule-hi: #3A3428;      /* the edge of a plate */

  /* ── ivory text (contrast against --stone-1) ── */
  --ivory: #EEE7D7;        /* primary, ~15:1 */
  --ivory-2: #BDB3A1;      /* secondary, ~9:1 */
  --ivory-3: #8E8573;      /* tertiary, ~5:1 - never below 14px */

  /* ── gold: metal, not amber ── */
  --gold: #C9A45C;         /* trim, the primary button's fill */
  --gold-hi: #E7CD92;      /* gold text on stone, the focus ring */
  --gold-lo: #8A6A30;      /* pressed, a second trim line, a quiet selected edge */
  --on-gold: #15110A;      /* text on a gold button, ~9:1 */

  /* ── the three crowns + governance: RIBBONS and EDGES only (emblem glow <= 12% alpha) ── */
  --scarlet: #B3202E;   --scarlet-2: #EDE3D3;     /* blood red / ivory */
  --violet: #6E42A6;    --violet-2: #C9A45C;      /* royal purple / gold */
  --sovereign: #2F4F80; --sovereign-2: #C5CCD6;   /* midnight / silver */
  --blackcrown: #C9A45C;                          /* governance = gold */
  /* the same crowns lifted for TEXT on stone (a midnight-blue word on black is unreadable) */
  --scarlet-text: #E0606B; --violet-text: #B08BE0; --sovereign-text: #8FA9D6;

  /* ── status: kept apart from the crown hues so "red" never means "Scarlet" ── */
  --ok: #5BB08A;   --ok-bg: rgba(91, 176, 138, .12);
  --warn: #E0913E; --warn-bg: rgba(224, 145, 62, .12);
  --bad: #E0564E;  --bad-bg: rgba(224, 86, 78, .12);
  --info: #8FA6C4; --info-bg: rgba(143, 166, 196, .12);

  /* ── type ── */
  --font-display: "Cinzel", "Trajan Pro", "Palatino Linotype", Georgia, serif;
  --font-text: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-label: "Barlow Semi Condensed", "Barlow", "Segoe UI", system-ui, sans-serif;
  /* the ONLY sizes allowed: 14 · 15 · 17 · 20 · 24 · 30 · 40 · 56 (+ the public display clamp and the 44px big number) */
  --fs-14: 14px; --fs-15: 15px; --fs-17: 17px; --fs-20: 20px; --fs-24: 24px; --fs-30: 30px; --fs-40: 40px; --fs-56: 56px;
  --fs-body: 17px;          /* staff room body; the public site reads at 18 */
  --fs-num: 44px;           /* the big stat number (36 on a phone) */
  --fs-display: clamp(44px, 6vw, 96px);
  --lh-body: 1.55;
  --track-label: .06em;     /* nothing is tracked wider than .08em */

  /* ── space: a 4-based scale ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --touch: 48px;            /* buttons, tabs and rows */

  /* ── shape: cut, don't round ── */
  --cut: 10px;              /* chamfer on plates, dialogs */
  --cut-sm: 6px;            /* chamfer on buttons, tags */
  /* top-left and bottom-right cut, as the mockup's cards are */
  --frame: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  --frame-sm: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
  --r-input: 2px; --r-card: 3px;
  --border: 1px solid var(--rule-hi);
  --trim: 1px solid var(--gold);

  /* ── elevation: layers only (dialog, drawer, toast). Plates sit flat on the stone. ── */
  --elev-0: 0 0 0 0 transparent;
  --elev-layer: 0 24px 64px rgba(0, 0, 0, .6);

  /* ── motion: a layer opening or a press, nothing else ── */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur-layer: 180ms;
  --dur-quick: 120ms;
}