/* ============================================================================
 * BBSS v6.16 · Magic Eden × Polymarket Design Tokens
 *   - Background anchored on Magic Eden's signature warm purple-black #15111D
 *   - Brand magenta #E42575 used SPARINGLY (CTA, active state, ~5% pixels)
 *   - Up/Down semantic: Polymarket emerald + orange-red
 *   - No aurora, no glow, no rainbow gradients — chrome is 95% neutral
 * ============================================================================ */

:root {
  /* ── BACKGROUNDS · Magic Eden warm dark anchor ─────────────────────── */
  --bg-0: #15111D;          /* base — signature warm purple-black */
  --bg-1: #1C1827;          /* lifted surface */
  --bg-2: #221E2E;          /* elevated card / hover surface */
  --bg-3: #2A2538;          /* card hover lift */
  --bg-card: #1C1827;
  --bg-card-hover: #221E2E;
  --bg-elevated: #2A2538;
  --bg-input: #15111D;

  /* ── BORDERS · violet-tinted hairlines ─────────────────────────────── */
  --border:   #2C2638;
  --border-2: #3A3247;
  --border-3: #463B58;
  --border-magenta: rgba(255, 45, 170, 0.34);
  --border-cyan: rgba(34, 211, 238, 0.30);
  --border-up: rgba(39, 208, 128, 0.28);
  --border-down: rgba(255, 89, 82, 0.28);

  /* ── TEXT · pure white + lavender-tinted hierarchy ─────────────────── */
  --text-1: #FFFFFF;         /* primary */
  --text-2: #C9C5D4;         /* secondary (lavender-tinted) */
  --text-3: #7D7689;         /* muted captions */
  --text-dim: #534B62;       /* hints / placeholder */

  /* ── BRAND · Dual-tone from logo (bright cyan + hot pink) ──────────── */
  /* v6.18: brighter, more luminous pink — matches logo right side and earlier v6.13 vibe */
  --brand-magenta: #FF2DAA;          /* hot bright pink, luminous */
  --brand-magenta-hover: #FF4DBA;
  --brand-magenta-soft: rgba(255, 45, 170, 0.14);
  --brand-magenta-bg: rgba(255, 45, 170, 0.08);

  --brand-cyan: #22D3EE;             /* logo top-left cyan */
  --brand-cyan-hover: #38DBF5;
  --brand-cyan-soft: rgba(34, 211, 238, 0.12);
  --brand-cyan-bg: rgba(34, 211, 238, 0.08);

  /* Logo gradient — punchy bright cyan → magenta */
  --brand-gradient: linear-gradient(135deg, #22D3EE 0%, #6366F1 45%, #FF2DAA 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(34,211,238,0.10), rgba(255,45,170,0.10));

  /* Legacy alias kept for backward compat; same value as magenta */
  --brand-pink: var(--brand-magenta);
  --brand-pink-soft: var(--brand-magenta-soft);
  --brand-pink-glow: rgba(255, 45, 170, 0.40);
  --brand-purple: #6366F1;           /* indigo mid-stop, matches logo middle gradient */
  --brand-purple-soft: rgba(99, 102, 241, 0.14);

  /* ── ACCENT ────────────────────────────────────────────────────────── */
  --info-blue: var(--brand-cyan);    /* links/info reuse brand cyan */
  --info-blue-soft: var(--brand-cyan-soft);

  /* Legacy aliases — neutralized */
  --acid-lime: var(--up);            /* (was #c8ff3d) — now points to emerald */
  --acid-lime-soft: rgba(39, 208, 128, 0.12);
  --acid-lime-glow: rgba(39, 208, 128, 0.30);
  --electric-orange: #FF8A3D;
  --electric-orange-soft: rgba(255, 138, 61, 0.14);
  --brand-coral: #FF7A4D;

  --neon-cyan: var(--brand-cyan);    /* alias to brand cyan */
  --neon-cyan-soft: var(--brand-cyan-soft);
  --neon-cyan-glow: rgba(34, 211, 238, 0.30);
  --neon-green: #27D080;             /* alias to up */
  --neon-green-soft: rgba(39, 208, 128, 0.13);
  --neon-green-glow: rgba(39, 208, 128, 0.30);
  --neon-amber: #FFB547;
  --neon-amber-soft: rgba(255, 181, 71, 0.12);
  --neon-pink: var(--brand-magenta);
  --neon-pink-soft: var(--brand-magenta-soft);
  --neon-purple: var(--brand-purple);
  --neon-purple-soft: var(--brand-purple-soft);
  --neon-purple-glow: rgba(108, 92, 231, 0.30);

  /* ── SEMANTIC · trading (Polymarket emerald + orange-red) ──────────── */
  --up:      #27D080;        /* emerald — saturated, not lime */
  --down:    #FF5952;        /* orange-red, not pure red */
  --warning: #FFB547;
  --danger:  #FF5952;

  /* legacy */
  --accent-up: var(--up);
  --accent-down: var(--down);

  /* ── GRADIENTS · matches logo (cyan → indigo → magenta) ────────────── */
  /* Primary CTA stays solid magenta for "5% pixel" rule; brand-gradient reserved for logo/hero */
  --grad-primary: var(--brand-magenta);
  --grad-secondary: var(--brand-gradient);
  --grad-data: linear-gradient(135deg, var(--up) 0%, var(--up) 100%);  /* flat */
  --grad-headline: var(--brand-gradient);

  /* Card gloss (very subtle) */
  --grad-card: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
  --grad-card-hover: var(--grad-card);

  /* Banner — flat tinted bg, no gradient bg */
  --grad-banner: var(--brand-magenta-bg);

  /* Hero — dual-tone radial mirroring logo (cyan top-left, hot pink top-right) */
  --grad-hero:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(34, 211, 238, 0.14), transparent 55%),
    radial-gradient(ellipse 900px 500px at 82% -5%,  rgba(255, 45, 170, 0.14), transparent 55%);

  /* ── FONTS · Inter + Inter Display (single family) ─────────────────── */
  --font-display: 'Inter Display', 'Inter', -apple-system, system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
  --font-tech: 'Inter', -apple-system, system-ui, sans-serif;

  /* ── RADIUS ───────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ── SHADOWS · tonal only, NO color glow ───────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255,255,255,0.03) inset;
  /* All "glow" tokens neutralized to subtle non-color shadows for backward compat */
  --glow-pink: 0 0 0 1px rgba(255, 45, 170, 0.24);
  --glow-purple: 0 0 0 1px rgba(99, 102, 241, 0.20);
  --glow-neon: var(--glow-pink);
  --glow-cyan: 0 0 0 1px rgba(46, 92, 255, 0.18);
  --glow-up: 0 0 0 1px rgba(39, 208, 128, 0.20);
  --glow-down: 0 0 0 1px rgba(255, 89, 82, 0.20);
  --glow-faint: 0 0 0 1px rgba(228, 37, 117, 0.12);

  /* ── DURATION / EASE ───────────────────────────────────────────────── */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-INDEX ───────────────────────────────────────────────────────── */
  --z-grain: 1;
  --z-aurora: 0;
  --z-content: 10;
  --z-nav: 50;
  --z-overlay: 100;
  --z-modal: 200;
  --z-toast: 300;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #grain-overlay { display: none; }
}