/**
 * R2R FinTech Design Tokens & Theme
 * Color Palette: Cyan -> Blue -> Violet -> Magenta
 * Deep Obsidian Dark Mode with Ultra-Premium Glassmorphism
 */

:root {
  /* Brand Core Gradients & Accents */
  --r2r-cyan: #00f0ff;
  --r2r-blue: #2979ff;
  --r2r-violet: #8a3ffc;
  --r2r-magenta: #f72585;
  --r2r-purple-dark: #3a0ca3;
  
  --gradient-r2r: linear-gradient(135deg, #00f0ff 0%, #2979ff 35%, #8a3ffc 70%, #f72585 100%);
  --gradient-r2r-subtle: linear-gradient(135deg, rgba(0, 240, 255, 0.15) 0%, rgba(138, 63, 252, 0.15) 100%);
  --gradient-card: linear-gradient(180deg, rgba(16, 22, 38, 0.75) 0%, rgba(9, 13, 23, 0.85) 100%);
  --gradient-button-auto: linear-gradient(135deg, #00f0ff 0%, #7b2cbf 50%, #f72585 100%);

  /* Trading State Indicators (Strictly P&L and Market Direction) */
  --trade-profit: #00e676;
  --trade-profit-glow: rgba(0, 230, 118, 0.35);
  --trade-profit-subtle: rgba(0, 230, 118, 0.12);
  --trade-loss: #ff3366;
  --trade-loss-glow: rgba(255, 51, 102, 0.35);
  --trade-loss-subtle: rgba(255, 51, 102, 0.12);
  --trade-neutral: #8b9bb4;

  /* Surfaces & Backgrounds */
  --bg-darkest: #05070d;
  --bg-body: #080c14;
  --bg-surface: rgba(13, 18, 30, 0.7);
  --bg-surface-elevated: rgba(20, 28, 48, 0.8);
  --bg-card: rgba(14, 20, 34, 0.65);
  --bg-input: rgba(6, 10, 18, 0.8);

  /* Borders & Glassmorphism */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-glow: rgba(0, 240, 255, 0.3);
  --border-glow-magenta: rgba(247, 37, 133, 0.3);
  --glass-blur: blur(20px);
  --card-radius: 14px;
  --pill-radius: 9999px;

  /* Typography */
  --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'Outfit', sans-serif;

  /* Text Colors */
  --text-primary: #f0f4fc;
  --text-secondary: #94a3b8;
  --text-muted: #5e6f8a;
  --text-cyan: #00f0ff;
  --text-magenta: #f72585;

  /* Shadows & Glows */
  --glow-cyan: 0 0 25px rgba(0, 240, 255, 0.45);
  --glow-magenta: 0 0 25px rgba(247, 37, 133, 0.45);
  --glow-subtle: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--bg-darkest);
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(0, 240, 255, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, rgba(138, 63, 252, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(247, 37, 133, 0.04) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Scrollbar customization */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-darkest);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--r2r-cyan);
}

/* Micro-Animations */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.3), 0 0 25px rgba(247, 37, 133, 0.2); }
  50% { box-shadow: 0 0 22px rgba(0, 240, 255, 0.65), 0 0 40px rgba(247, 37, 133, 0.5); }
  100% { box-shadow: 0 0 10px rgba(0, 240, 255, 0.3), 0 0 25px rgba(247, 37, 133, 0.2); }
}

@keyframes liveDotGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}