/* ============================================================
   variables.css
   Part of KineticAI Frontend — split from v6_updated.html
   ============================================================ */

/* ---- DESIGN TOKENS  –  Clean Light Professional Theme ---- */
:root {
  /* Backgrounds — clean white/light gray */
  --bg0: #F1F5F9;
  --bg1: #FFFFFF;
  --bg2: #F8FAFC;
  --bg3: #EFF2F6;
  --surface: #FFFFFF;
  --surface2: #F8FAFC;
  --border: rgba(100,116,139,0.12);
  --border2: rgba(100,116,139,0.18);
  --border3: rgba(100,116,139,0.32);

  /* Primary — deep sky blue (readable on light bg) */
  --neon: #0284C7;
  --neon2: #0369A1;
  --neon-bg: rgba(2,132,199,0.07);
  --neon-border: rgba(2,132,199,0.18);

  /* Trainer accent — amber */
  --orange: #D97706;
  --orange2: #B45309;
  --orange-bg: rgba(217,119,6,0.07);
  --orange-border: rgba(217,119,6,0.18);

  /* Secondary — indigo */
  --blue: #4F46E5;
  --blue2: #4338CA;
  --blue-bg: rgba(79,70,229,0.07);
  --blue-border: rgba(79,70,229,0.18);

  --purple: #7C3AED;
  --purple-bg: rgba(124,58,237,0.07);

  --red: #DC2626;
  --red2: #B91C1C;
  --red-bg: rgba(220,38,38,0.07);
  --red-border: rgba(220,38,38,0.18);

  --yellow: #D97706;
  --yellow-bg: rgba(245,158,11,0.08);
  --yellow-border: rgba(245,158,11,0.2);

  /* Text — dark readable slate */
  --text: #0F172A;
  --text2: #475569;
  --text3: #94A3B8;

  /* Radius */
  --r: 8px;
  --r-sm: 6px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Font */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;

  /* Shadows — soft on light backgrounds */
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.1);
  --shadow-xl: 0 8px 32px rgba(0,0,0,0.12);
  --glow-neon: 0 0 0 3px rgba(2,132,199,0.18);
  --glow-orange: 0 0 0 3px rgba(217,119,6,0.18);
  --glow-blue: 0 0 0 3px rgba(79,70,229,0.18);
}