/* ==========================================================================
   Thunder Stallion — Design Tokens
   Palette extracted from the brand logo: electric cyan lightning, neon purple
   storm, magenta highlights, deep midnight blue + storm black, ember orange.
   All visual values flow from here. Do not hard-code colors elsewhere.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --cyan: #19e3ff;
  --cyan-bright: #6cefff;
  --cyan-deep: #0094c2;
  --purple: #8a3dff;
  --purple-bright: #ab74ff;
  --purple-deep: #5b1fb0;
  --magenta: #ff36c5;
  --magenta-soft: #ff77da;
  --orange: #ff8a3d;   /* ember accent — used sparingly */
  --crimson: #ff2e5b;  /* storm accent — used sparingly */

  /* semantic */
  --up: #21e6a4;       /* gainers (kept teal-leaning, never generic crypto green) */
  --down: #ff486b;     /* losers */

  /* ---- Backgrounds ------------------------------------------------------ */
  --storm-black: #06070f;
  --midnight: #0b1136;
  --bg-0: #05060d;
  --bg-1: #090d20;
  --bg-2: #0e1430;

  /* ---- Surfaces / glass ------------------------------------------------- */
  --surface: rgba(16, 20, 46, 0.55);
  --surface-2: rgba(23, 29, 62, 0.62);
  --surface-3: rgba(30, 38, 78, 0.5);
  --surface-solid: #0d1430;
  --border: rgba(124, 150, 255, 0.16);
  --border-strong: rgba(124, 170, 255, 0.34);
  --border-glow: rgba(25, 227, 255, 0.4);

  /* ---- Text ------------------------------------------------------------- */
  --text: #eaf2ff;
  --text-dim: #9aa6c8;
  --text-faint: #5f6a8d;

  /* ---- Gradients -------------------------------------------------------- */
  --grad-brand: linear-gradient(135deg, var(--cyan) 0%, var(--purple) 55%, var(--magenta) 100%);
  --grad-brand-rev: linear-gradient(135deg, var(--magenta) 0%, var(--purple) 50%, var(--cyan) 100%);
  --grad-soft: linear-gradient(135deg, rgba(25, 227, 255, 0.16), rgba(138, 61, 255, 0.16));
  --grad-text: linear-gradient(110deg, #ffffff 0%, var(--cyan-bright) 38%, var(--magenta) 92%);
  --grad-ember: linear-gradient(135deg, var(--orange), var(--crimson));
  --grad-surface: linear-gradient(160deg, rgba(28, 35, 78, 0.55), rgba(12, 16, 38, 0.5));

  /* ---- Glows / shadows -------------------------------------------------- */
  --glow-cyan: 0 0 24px rgba(25, 227, 255, 0.45);
  --glow-purple: 0 0 28px rgba(138, 61, 255, 0.45);
  --glow-magenta: 0 0 26px rgba(255, 54, 197, 0.4);
  --glow-soft: 0 0 0 1px rgba(124, 150, 255, 0.12), 0 0 40px rgba(25, 227, 255, 0.08);
  --shadow-card: 0 18px 50px -18px rgba(0, 0, 0, 0.7);
  --shadow-soft: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 30px 80px -24px rgba(8, 10, 30, 0.9);

  /* ---- Radii ------------------------------------------------------------ */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Layout ----------------------------------------------------------- */
  --maxw: 1240px;
  --maxw-narrow: 920px;
  --nav-h: 74px;
  --gap: 24px;
  --pad-section: clamp(56px, 8vw, 120px);

  /* ---- Motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 0.18s;
  --t: 0.3s;
  --t-slow: 0.6s;

  /* ---- Z-index ---------------------------------------------------------- */
  --z-bg: 0;
  --z-base: 1;
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;
}