/* ============================================================
   CryptoSignals.bot — Design Tokens (single source of truth, web)
   Extracted verbatim from prototype/css/app.css (2026-06-07).
   Dark is the DEFAULT theme; light is required.
   Set data-theme="dark" | "light" on the root element.

   EVOLUTION 2026-07-01 (owner-sanctioned, Fable 5 session — recorded
   in design_handoff/CLAUDE.md "TOKEN EVOLUTION" section):
   - NEW scales (additive): fluid type ramp (the --fz- and --lh- families), spacing
     (--sp-*), motion durations (--dur-*), elevation ramp
     (--shadow-1/2/3), a11y focus ring (--focus-ring).
   - PROMOTED: the admin amber status literal #f0b00b is now --warn /
     --warn-2 (theme-aware; light uses a contrast-safe deep amber).
   - ADJUSTED: --text-3 legibility nudge in both themes (muted text
     was under-contrast, esp. on light). Hierarchy preserved.
   Semantic color discipline is UNCHANGED: up/down semantic-only,
   accent = sole interactive hue, signal = logo + EMA only.
   ============================================================ */

:root{
  /* radii */
  --r-sm:6px; --r-md:9px; --r-lg:14px; --r-xl:20px;

  /* type — Geist for UI, Geist Mono for ALL numbers/prices (tabular) */
  --fs-mono:"Geist Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --fs-ui:"Geist","Inter Tight",system-ui,-apple-system,Segoe UI,sans-serif;

  /* type scale (2026-07-01) — fluid ramp; terminal body stays 13px,
     marketing display sizes breathe with the viewport */
  --fz-2xs:11px; --fz-xs:12px; --fz-sm:13px; --fz-md:14px;
  --fz-lg:clamp(16px,.4vw + 14px,18px);
  --fz-xl:clamp(20px,.9vw + 16px,24px);
  --fz-2xl:clamp(26px,1.8vw + 18px,34px);
  --fz-3xl:clamp(34px,3vw + 20px,48px);
  --lh-tight:1.15; --lh-ui:1.45; --lh-relaxed:1.65;

  /* spacing scale (2026-07-01) — 4px base */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur-fast:120ms; --dur-med:220ms; --dur-slow:420ms;   /* 2026-07-01 */

  /* elevation */
  --shadow-pop:0 18px 50px -12px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3);
  --shadow-3:var(--shadow-pop);   /* ramp alias — 1/2 are per-theme below */

  /* a11y focus ring (2026-07-01) — layered on --bg so it reads on any fill;
     use with :focus-visible only, never :focus */
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* theme-invariant inks (promoted prototype literals — same in both themes) */
  --on-accent:#fff;          /* text/glyphs on --accent / --up / --down fills */
  --ink-on-signal:#06120a;   /* logo glyph ink on the signal->up gradient tile */

  /* ============================================================
     ATMOSPHERE & ELEVATION LAYER  (beautification pass, 2026-06-08)
     Additive only — the semantic tokens above are untouched. These
     drive depth (ambient meshes), card elevation (surface gradient +
     hairline highlight), and accent glows. Recorded as a deviation in
     design_handoff/CLAUDE.md.
     ============================================================ */

  /* Coin identity palette — real per-asset brand colors, theme-invariant
     like the inks above. A distinct concern from semantic up/down/accent;
     used ONLY for coin badges/avatars, never for UI state. */
  --coin-btc:#f7931a; --coin-eth:#627eea; --coin-sol:#14e8b0;
  --coin-bnb:#f0b90b; --coin-xrp:#8b97a8; --coin-doge:#c2a633;
  --coin-ada:#3468d1; --coin-usdt:#26a17b; --coin-default:#7e8aa0;

  /* shared motion + radii extensions */
  --ease-out:cubic-bezier(.16,1,.3,1);   /* expressive ease for reveals/lifts */
  --r-2xl:26px;
}

/* ---------- DARK (default) ---------- */
[data-theme="dark"]{
  --bg:#080a10;
  --panel:#0f131c;
  --panel-2:#141925;
  --elev:#1a2030;
  --hover:#1d2433;
  --border:#212838;
  --border-2:#2c3447;
  --text:#e9edf4;
  --text-2:#94a0b3;
  --text-3:#6b7590;                   /* 2026-07-01: was #596275 — legibility nudge */
  --up:#1fc88a;                       /* buy / gain — semantic, NOT brand */
  --up-2:rgba(31,200,138,.15);
  --down:#f2495c;                     /* sell / loss — semantic, NOT brand */
  --down-2:rgba(242,73,92,.15);
  --accent:#5a8cff;                   /* interactive accent (links, focus, primary) */
  --accent-2:rgba(90,140,255,.16);
  --signal:#c2f24e;                   /* signal-lime — logo mark + EMA line only */
  --warn:#f0b00b;                     /* 2026-07-01: promoted admin amber literal */
  --warn-2:rgba(240,176,11,.14);
  --grid:rgba(255,255,255,.045);
  --grid-2:rgba(255,255,255,.025);
  --crosshair:rgba(255,255,255,.35);
  --scrim:rgba(4,6,11,.66);

  /* elevation ramp (2026-07-01): 1 = resting card, 2 = dropdown/hover-lift,
     3 = modal/popover (alias of --shadow-pop in :root) */
  --shadow-1:0 1px 2px rgba(0,0,0,.35), 0 3px 10px -4px rgba(0,0,0,.4);
  --shadow-2:0 10px 28px -10px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.28);

  /* atmosphere (dark): ambient page glows + card elevation */
  --ambient-1:rgba(90,140,255,.11);    /* accent halo, top-right */
  --ambient-2:rgba(31,200,138,.06);    /* up halo, mid-left */
  --ambient-3:rgba(194,242,78,.045);   /* signal halo, low */
  --surface-grad:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0) 42%);
  --hairline:rgba(255,255,255,.06);    /* inset top highlight on cards */
  --hairline-2:rgba(255,255,255,.10);
  --sheen:rgba(255,255,255,.07);       /* moving highlight for shimmer */
  --glow-accent:0 14px 40px -14px rgba(90,140,255,.50);
  --glow-up:0 14px 40px -14px rgba(31,200,138,.42);
  --glow-signal:0 0 36px -8px rgba(194,242,78,.45);
  --grain-opacity:.035;
  color-scheme:dark;
}

/* ---------- LIGHT ---------- */
[data-theme="light"]{
  --bg:#eef1f6;
  --panel:#ffffff;
  --panel-2:#f6f8fc;
  --elev:#ffffff;
  --hover:#eef2f8;
  --border:#e3e8f0;
  --border-2:#d4dae4;
  --text:#0d1320;
  --text-2:#5a6577;
  --text-3:#77839a;                   /* 2026-07-01: was #929cad — legibility nudge */
  --up:#0aa46c;
  --up-2:rgba(10,164,108,.12);
  --down:#e0334c;
  --down-2:rgba(224,51,76,.10);
  --accent:#2f68ff;
  --accent-2:rgba(47,104,255,.10);
  --signal:#5fae00;
  --warn:#9a6b00;                     /* 2026-07-01: contrast-safe deep amber (text on white) */
  --warn-2:rgba(154,107,0,.12);
  --grid:rgba(13,19,32,.05);
  --grid-2:rgba(13,19,32,.028);
  --crosshair:rgba(13,19,32,.4);
  --scrim:rgba(20,28,44,.32);

  /* elevation ramp (2026-07-01) — subtler in light */
  --shadow-1:0 1px 2px rgba(13,19,32,.06), 0 3px 10px -4px rgba(13,19,32,.08);
  --shadow-2:0 10px 28px -10px rgba(13,19,32,.14), 0 2px 6px rgba(13,19,32,.06);

  /* atmosphere (light): softer ambient + bright hairline */
  --ambient-1:rgba(47,104,255,.08);
  --ambient-2:rgba(10,164,108,.05);
  --ambient-3:rgba(95,174,0,.04);
  --surface-grad:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0) 55%);
  --hairline:rgba(255,255,255,.85);
  --hairline-2:rgba(255,255,255,1);
  --sheen:rgba(255,255,255,.6);
  --glow-accent:0 18px 44px -16px rgba(47,104,255,.30);
  --glow-up:0 18px 44px -16px rgba(10,164,108,.26);
  --glow-signal:0 0 30px -8px rgba(95,174,0,.28);
  --grain-opacity:.02;
  color-scheme:light;
}