/* ============================================================
   Blakey Trades — AAA design tokens
   Family: premium-dark · Exemplars: Revolut (design.md 12505) + Apple (design.md 359)
   Direction: "flagship fintech app" — near-black + graphite, gold as a PRECISE
   accent, big tight-tracked display, pill buttons, glass chrome, near-zero shadows
   (Apple restraint), depth from contrast + whitespace (Revolut).
   This file is the single source of truth; styles.css consumes these vars.
   ============================================================ */
:root{
  /* ---- surfaces: OLED-crisp — flat black base, SOLID graphite cards, sharp hairlines
         (was milky translucent-white over a warm gradient; Arron read it as hazy) ---- */
  --ink:#060607;
  --surface:#0E0E11;
  --surface-2:#111116;
  --surface-3:#191920;
  --surface-4:#22222b;
  --line:rgba(255,255,255,0.09);
  --line-2:rgba(255,255,255,0.14);
  --hairline:rgba(255,255,255,0.11);

  /* ---- brand accent — DEFAULTS ONLY. brand.js overrides all of these at runtime
         from BRAND.accent (one hex). These stay as a fallback if brand.js fails. ---- */
  --gold-rgb:224,178,60;
  --on-accent:#1A1206;
  --gold:#E0B23C;
  --gold-hi:#F3D277;
  --gold-deep:#A87C22;
  --gold-soft:rgba(224,178,60,0.12);
  --gold-line:rgba(224,178,60,0.22);
  --gold-foil:linear-gradient(135deg,#8A6620 0%,#E0B23C 24%,#FBEAB0 47%,#ECC85F 58%,#A87C22 82%,#705117 100%);

  /* ---- text: bright + Revolut neutral scale ---- */
  --text:#F3F3F1;
  --text-2:#D6D6DA;
  --muted:#9A9AA6;
  --faint:#82828E;

  /* ---- market ---- */
  --up:#3FBF7F;
  --down:#F0565B;
  --live:#FF4D4D;

  /* ---- states: semantic feedback (empty / loading / success / warning / info) ---- */
  --ok:var(--up);
  --ok-soft:rgba(63,191,127,0.12);
  --warn:#E8A33D;
  --warn-rgb:232,163,61;
  --warn-soft:rgba(232,163,61,0.12);
  --info:#5EA8E8;
  --info-rgb:94,168,232;
  --info-soft:rgba(94,168,232,0.12);
  --skel-sweep:rgba(255,255,255,0.07);

  /* ---- type — Research Desk recipe (same families, tighter display rhythm) ---- */
  --display:"Sora",system-ui,sans-serif; /* bold display — weights 700–800 */
  --body:"Outfit",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace; /* plain zeros — JetBrains dotted 0 retired */
  --fs-display:28px;        /* page titles (was 34 — Research Desk uses 28) */
  --fs-h1:22px;             /* greet / who name */
  --fs-h2:17px;             /* card headlines */
  --fs-h3:15px;
  --fs-h4:13.5px;
  --fs-body:14.5px;
  --fs-small:13px;
  --fs-tiny:11px;
  --tracking:-0.028em;      /* display / headlines — Research Desk tight */
  --tracking-mega:-0.034em; /* page titles */
  --tracking-body:-0.006em;
  --tracking-num:-0.04em;   /* big mono prices */

  /* ---- spacing (8px base, Revolut, generous) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  /* ---- radii: pill + soft premium cards ---- */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px; --r-2xl:36px; --r-full:9999px;

  /* ---- depth: Apple restraint (near-zero; one soft signature) ---- */
  --sh-1:0 6px 24px -12px rgba(10,7,2,0.55);
  --sh-2:0 18px 60px -22px rgba(10,7,2,0.75);
  /* ---- 3-tier elevation: inline rows (1) · cards (2) · floating chrome (3) ---- */
  --elev-1:inset 0 1px 0 rgba(255,255,255,.10);
  --elev-2:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.28),0 18px 42px -24px rgba(7,5,2,.78);
  --elev-3:inset 0 1px 0 rgba(255,255,255,.14),0 24px 60px -20px rgba(7,5,2,.86);
  --glow-gold:0 0 0 1px rgba(224,178,60,0.22),0 20px 60px -20px rgba(224,178,60,0.28);
  --glass-blur:blur(30px) saturate(165%);
  --glass-bg:rgba(10,10,12,0.72);

  /* ---- film grain (premium matte texture layered on surfaces) ---- */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");

  /* ---- motion ---- */
  --ease-spring:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* ---- app metrics ---- */
  --tabbar-h:80px;
  --gutter:20px;
  --app-w:390px;
  --app-h:844px;
}

/* ===== Light mode (Profile → Appearance → Light) ===== */
[data-theme="light"]{
  --ink:#F1F0EB;
  --surface:#FFFFFF;
  --surface-2:rgba(22,20,14,0.035);
  --surface-3:rgba(22,20,14,0.06);
  --surface-4:rgba(22,20,14,0.10);
  --line:rgba(22,20,14,0.10);
  --line-2:rgba(22,20,14,0.15);
  --hairline:rgba(22,20,14,0.10);

  --gold:#9A7B2E;
  --gold-hi:#7C5E1C;
  --gold-deep:#5E4716;
  --gold-soft:rgba(154,123,46,0.12);
  --gold-line:rgba(154,123,46,0.30);
  --gold-foil:linear-gradient(135deg,#6A5019 0%,#9A7B2E 22%,#C0982E 47%,#A87C22 62%,#7A5E1E 82%,#5E4716 100%);

  --text:#15151A;
  --text-2:#2A2A30;
  --muted:#5E5E68;
  --faint:#63636D;

  --up:#0B7C49;
  --down:#D23A3F;

  --ok-soft:rgba(11,124,73,0.10);
  --warn:#9A6A14;
  --warn-rgb:154,106,20;
  --warn-soft:rgba(154,106,20,0.10);
  --info:#2B6CB8;
  --info-rgb:43,108,184;
  --info-soft:rgba(43,108,184,0.10);
  --skel-sweep:rgba(22,20,14,0.06);

  --sh-1:0 6px 22px -12px rgba(22,20,14,0.18);
  --sh-2:0 18px 50px -22px rgba(22,20,14,0.22);
  --elev-1:inset 0 1px 0 rgba(255,255,255,.55);
  --elev-2:inset 0 1px 0 rgba(255,255,255,.70),0 14px 36px -24px rgba(22,20,14,.22);
  --elev-3:inset 0 1px 0 rgba(255,255,255,.85),0 22px 50px -22px rgba(22,20,14,.26);
  --glow-gold:0 0 0 1px rgba(154,123,46,0.20),0 18px 50px -22px rgba(154,123,46,0.20);
  --glass-bg:rgba(255,255,255,0.78);
}

/* The live lobby is a cinematic dark room in BOTH themes — re-darken the neutral
   tokens inside it so light-mode text never lands on the dark stage unreadably.
   Gold tokens are re-darkened by brand.js (kept reskinnable from BRAND.accent). */
[data-theme="light"] #live-lobby,
[data-theme="light"] #live-stage{
  --text:#F3F3F1;
  --text-2:#D6D6DA;
  --muted:#9A9AA6;
  --faint:#82828E;
  --surface-2:#111116;
  --surface-3:#191920;
  --surface-4:#22222b;
  --line:rgba(255,255,255,0.09);
  --line-2:rgba(255,255,255,0.14);
  --hairline:rgba(255,255,255,0.11);
}