/* === MASTERHOLD DESIGN TOKENS — the single source (UXW2 / OVERHAUL W2) ===
   One token = one meaning. Every visual value in the app resolves here.
   Existing 11 vars kept byte-identical (W76 append-only rule); everything below is additive.
   Gold is the W104-harmonized #DCB556 (the pre-rebrand system gold predates it). */
:root {
  /* --- brand + surfaces (kept verbatim) --- */
  --bg: #0A0A0F;
  --surface: #14141C;
  --surface2: #1C1C26;
  --gold: #DCB556;
  --gold-soft: #EAD39A;
  --text: #F4F1E8;
  --muted: #9B97A6;
  --green: #34D399;
  --amber: #FBBF24;   /* DEPRECATED (UXW2): warning is --warn. Unused by product CSS since W11; only the gated competitive-2026-10 report still references it. */
  --red: #F87171;
  --blue: #60A5FA;

  /* --- surfaces, derived --- */
  --surface-2: var(--surface2);     /* design-system doc spelling alias */
  --surface-3: #2A2A38;             /* hover/raised on surface-2 (consolidates #2a2a38/#3a3a46/#34344a) */
  --bg-side: #0D0D14;               /* sidebar well */

  /* --- borders: semantic (were undefined — 5 var(--border) uses silently rendered nothing) --- */
  --border: rgba(244,241,232,.09);
  --border-strong: rgba(244,241,232,.16);

  /* --- text, tertiary --- */
  --faint: #6E6A7A;                 /* large text/icons only, never body (3.9:1) */

  /* --- gold family (THE interactive color) --- */
  --gold-deep: #B49447;             /* pressed state, small text on gold tints (landing's live value, harmonized) */
  --gold-tint: rgba(220,181,86,.12);
  --on-gold: #1A1408;               /* text on solid gold (DESIGN-SYSTEM value; app was #0A0A0F — near-identical warm black) */

  /* --- semantic (the 3-ambers/2-greens fix: ONE warning orange, off the gold hue) --- */
  --success: var(--green);
  --success-tint: rgba(52,211,153,.12);
  --danger: var(--red);
  --danger-tint: rgba(248,113,113,.12);
  --warn: #FB923C;
  --warn-tint: rgba(251,146,60,.12);
  --info: var(--blue);
  --info-tint: rgba(96,165,250,.12);
  --muted-tint: rgba(155,151,166,.15);  /* neutral pill backgrounds (UXW11: admin 'free' pill) */
  --spotify: #1DB954;               /* QUARANTINED: Spotify logo/link chip only, never a status color */
  --remix: #C084FC;                 /* remix classification accent (pills/badges only) */
  --remix-tint: rgba(192,132,252,.12);

  /* --- typography --- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace; /* SOC-4 DL-1: typed identifiers + code only (Curve key, forwarding address) — never money, dates or counts */
  /* 8-step scale. Floor: >=12px informative / >=14px consequential (money, dialog actions). */
  --fs-micro: 12px;   /* badges, pills, table column heads */
  --fs-small: 13px;   /* meta, sub-lines */
  --fs-body: 14px;    /* default UI text */
  --fs-lead: 15px;    /* card titles, emphasized rows */
  --fs-h3: 17px;      /* section heads */
  --fs-h2: 20px;      /* page sub-heads, KPI figures small */
  --fs-h1: 25px;      /* page titles, greeting */
  --fs-figure: 30px;  /* KPI hero figures — Space Grotesk 600 */

  /* --- spacing (4px base) --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;

  /* --- radii (4 values; 99px/999px merge into one pill token) --- */
  --r-sm: 6px;    /* inputs, small buttons, tags */
  --r-md: 10px;   /* cards, tables, modals */
  --r-lg: 14px;   /* page-level panels, bottom sheets */
  --r-pill: 999px;

  /* --- elevation (overlay depth only) --- */
  --e1: 0 1px 2px rgba(0,0,0,.35);                   /* sticky bars */
  --e2: 0 8px 24px rgba(0,0,0,.45);                  /* dropdowns, popovers, toasts */
  --e3: 0 16px 48px rgba(0,0,0,.55);                 /* modals, sheets */
  --focus: 0 0 0 3px rgba(220,181,86,.28);           /* gold focus ring */

  /* --- motion --- */
  --t-fast: 120ms; --t-med: 220ms;
  --ease: cubic-bezier(.2,.7,.3,1);

  /* --- tab-strip affordance (CLL-176) --- */
  --tabs-fade: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}