/* ═══════════════════════════════════════════════════════
   GOALPULSE AI v2 — DESIGN TOKENS
   Navy + Cyan + Gold intelligence terminal aesthetic
   ═══════════════════════════════════════════════════════ */

:root {
  /* ── Backgrounds ── */
  --bg-deep:    #040610;
  --bg:         #060818;
  --bg-card:    #0C1225;
  --bg-card2:   #101830;
  --bg-hover:   #141C38;
  --bg-input:   #0A0F20;

  /* ── Borders ── */
  --border:     #1A2140;
  --border-light: #222B50;
  --border-focus: #00D9FF;

  /* ── Text ── */
  --text:       #E8ECF4;
  --text-2:     #8B95B0;
  --text-3:     #4A5470;
  --text-inv:   #060818;

  /* ── Cyan (primary accent — live, active, sharp money) ── */
  --cyan:       #00D9FF;
  --cyan-soft:  rgba(0, 217, 255, 0.08);
  --cyan-border:rgba(0, 217, 255, 0.20);
  --cyan-glow:  0 0 12px rgba(0, 217, 255, 0.15);

  /* ── Gold (secondary accent — value, picks, VIP, premium) ── */
  --gold:       #FFB800;
  --gold-soft:  rgba(255, 184, 0, 0.08);
  --gold-border:rgba(255, 184, 0, 0.20);
  --gold-glow:  0 0 12px rgba(255, 184, 0, 0.15);

  /* ── Green (positive — wins, up, correct) ── */
  --green:      #00E29A;
  --green-soft: rgba(0, 226, 154, 0.08);
  --green-border:rgba(0, 226, 154, 0.20);

  /* ── Red (negative — losses, down, alerts, avoid) ── */
  --red:        #FF3B5C;
  --red-soft:   rgba(255, 59, 92, 0.08);
  --red-border: rgba(255, 59, 92, 0.20);
  --red-glow:   0 0 12px rgba(255, 59, 92, 0.15);

  /* ── Orange (warning) ── */
  --orange:     #FF8C42;
  --orange-soft:rgba(255, 140, 66, 0.08);

  /* ── Typography ── */
  --font:       'Manrope', -apple-system, system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing ── */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap-md: 12px;
  --gap-lg: 16px;
  --gap-xl: 24px;

  /* ── Radius ── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ── Transitions ── */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --speed: 200ms;

  /* ── Z-index layers ── */
  --z-base: 1;
  --z-sticky: 10;
  --z-drawer: 50;
  --z-overlay: 60;
  --z-modal: 70;
  --z-toast: 80;

  /* ── Shadows ── */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.4);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.nosel { user-select: none; -webkit-user-select: none; }