/* ============================================================
   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: near-black base + graphite elevation (Apple) ---- */
  --ink:#08080A;
  --surface:#0E0E11;
  --surface-2:rgba(255,255,255,0.05);
  --surface-3:rgba(255,255,255,0.08);
  --surface-4:rgba(255,255,255,0.12);
  --line:rgba(255,255,255,0.06);
  --line-2:rgba(255,255,255,0.11);
  --hairline:rgba(255,255,255,0.08);

  /* ---- brand gold (precise accent, not everywhere) — bullion shade ---- */
  --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;
  --muted:#9A9AA6;
  --faint:#5E5E6A;

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

  /* ---- type ---- */
  --display:"Sora",system-ui,sans-serif;
  --body:"Outfit",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --fs-display:34px;
  --fs-h1:26px;
  --fs-h2:20px;
  --fs-h3:16.5px;
  --fs-h4:14px;
  --fs-body:15px;
  --fs-small:13px;
  --fs-tiny:11px;
  --tracking:-0.022em;      /* display / headlines */
  --tracking-mega:-0.034em; /* hero mega */
  --tracking-body:-0.006em; /* Apple: negative tracking even at body size */

  /* ---- 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(0,0,0,0.55);
  --sh-2:0 18px 60px -22px rgba(0,0,0,0.75);
  --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;
  --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);

  --text:#15151A;
  --muted:#5E5E68;
  --faint:#9C9CA6;

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

  --sh-1:0 6px 22px -12px rgba(22,20,14,0.18);
  --sh-2:0 18px 50px -22px rgba(22,20,14,0.22);
  --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);
}