/* ═══════════════════════════════════════════════════════════════════════════
   THE RECOVERY LEAGUE — shared design system (xtrash-theme.css)
   A PBSP × BEST · Trash to Cashback surface language.
   Concept: an FT/Bloomberg-grade league INDEX crossed with a Champions-League
   standings board. Data reads like a tracked asset (IBM Plex Mono, tabular);
   the championship — crowns, weight-class divisions, live overtakes — is the fun.

   Reusable across xtrash.html / xtrash-report.html / xtrash-hr.html /
   xtrash-operator.html / ttcb-city-league.html. Tokens + type + a few shared
   primitives live here; page-specific components consume the tokens.

   LIGHT "board-deck" is the PRIMARY/hero look. DARK is a "control-room" alt.
   Both spec token names AND legacy aliases are defined so existing markup that
   references --green/--red/--m-gold/--mat-* keeps working unchanged.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme: light;

  /* ── surfaces · light board-deck (primary) ───────────────────────────── */
  --bg:#F5F7F4;            /* cool green-tinted paper            */
  --surface:#FFFFFF;
  --surface-2:#EEF2ED;
  --surface-3:#E5ECE3;
  --line:#E2E8E2;
  --line-strong:#CBD6CB;

  /* ── ink ramp ────────────────────────────────────────────────────────── */
  --ink:#10201B;
  --ink-2:#3A4A43;
  --ink-3:#6B7A72;
  --ink-faint:#93A29A;

  /* ── brand / trust ───────────────────────────────────────────────────── */
  --navy:#014768;          /* brand ink + the single most important number  */
  --blue:#185FB7;          /* active state · links · live accent            */
  --blue-soft:#E7EFFB;

  /* ── championship (RESERVED for crowns / leaders / perks) ────────────── */
  --gold:#C08A2D;          /* brass / trophy — marks, borders, gradients    */
  --gold-tint:#F5EBD6;
  --gold-ink:#8A5E15;      /* deep brass — brass used AS TEXT on gold-tint  */

  /* ── signal ──────────────────────────────────────────────────────────── */
  --live:#1F9D57;          /* live · positive · up                          */
  --live-soft:#E3F2E9;
  --down:#C0492F;          /* down movement                                 */
  --amber:#B26A00;

  /* ── materials (data only · validated categorical, light) ────────────── */
  --mat-Plastic:#2E9E8F;
  --mat-Paper:#E08A3C;
  --mat-Metal:#5B6B7A;
  --mat-Glass:#7C5CBF;

  /* ── legacy aliases (existing markup / inline JS reference these) ────── */
  --green:var(--live);      --green-soft:var(--live-soft);
  --red:var(--down);
  --m-gold:var(--gold-ink); --m-gold-bg:var(--gold-tint);
  --m-silver:#5C6B77;       --m-silver-bg:#EAEEF1;
  --m-bronze:#9A6534;       --m-bronze-bg:#F3E7D8;

  /* ── depth · shape ───────────────────────────────────────────────────── */
  --shadow:0 10px 30px rgba(1,71,104,.13);
  --shadow-sm:0 2px 8px rgba(1,71,104,.07);
  --r-chip:999px; --r-sm:6px; --r-md:10px; --r-lg:14px;

  /* ── brand plate helpers ─────────────────────────────────────────────── */
  --logo-plate:transparent; --logo-padx:0;

  /* ── type ────────────────────────────────────────────────────────────── */
  --font-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ── DARK · "control-room" alt (deep pine) ─────────────────────────────── */
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0A241E; --surface:#0F2E26; --surface-2:#123529; --surface-3:#173D30;
  --line:#1C332B; --line-strong:#2B4539;
  --ink:#E7F0EA; --ink-2:#AEC4B8; --ink-3:#7F988A; --ink-faint:#5E7568;
  --navy:#57C7B5; --blue:#5AA0F5; --blue-soft:#123049;
  --gold:#D9A94E; --gold-tint:#33280C; --gold-ink:#EAC873;
  --live:#3FBE7C; --live-soft:#123529; --down:#E4715A; --amber:#E0A13A;
  --mat-Plastic:#35B0A0; --mat-Paper:#E89A54; --mat-Metal:#7E8FA0; --mat-Glass:#9B84D6;
  --green:var(--live); --green-soft:var(--live-soft); --red:var(--down);
  --m-gold:var(--gold-ink); --m-gold-bg:var(--gold-tint);
  --m-silver:#B4C0C9; --m-silver-bg:#1E3A2F; --m-bronze:#CF9159; --m-bronze-bg:#331F0E;
  --shadow:0 14px 38px rgba(0,0,0,.55); --shadow-sm:0 2px 10px rgba(0,0,0,.45);
  --logo-plate:#F4F8FB; --logo-padx:8px;
}
@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    color-scheme: dark;
    --bg:#0A241E; --surface:#0F2E26; --surface-2:#123529; --surface-3:#173D30;
    --line:#1C332B; --line-strong:#2B4539;
    --ink:#E7F0EA; --ink-2:#AEC4B8; --ink-3:#7F988A; --ink-faint:#5E7568;
    --navy:#57C7B5; --blue:#5AA0F5; --blue-soft:#123049;
    --gold:#D9A94E; --gold-tint:#33280C; --gold-ink:#EAC873;
    --live:#3FBE7C; --live-soft:#123529; --down:#E4715A; --amber:#E0A13A;
    --mat-Plastic:#35B0A0; --mat-Paper:#E89A54; --mat-Metal:#7E8FA0; --mat-Glass:#9B84D6;
    --green:var(--live); --green-soft:var(--live-soft); --red:var(--down);
    --m-gold:var(--gold-ink); --m-gold-bg:var(--gold-tint);
    --m-silver:#B4C0C9; --m-silver-bg:#1E3A2F; --m-bronze:#CF9159; --m-bronze-bg:#331F0E;
    --shadow:0 14px 38px rgba(0,0,0,.55); --shadow-sm:0 2px 10px rgba(0,0,0,.45);
    --logo-plate:#F4F8FB; --logo-padx:8px;
  }
}

/* ══ shared primitives ════════════════════════════════════════════════════
   The signature: every number, rank, EP/kg value, and eyebrow label is set in
   IBM Plex Mono, tabular. Marks the data as a tracked asset.                */
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums}