/* ============================================================
   VARIABLES — Edit this file to retheme the entire website
   ============================================================ */
:root {
  /* Colors */
  --bg-primary: #08080f;
  --bg-secondary: #0d0d1a;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.07);
  --border-color: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(108, 99, 255, 0.4);

  /* Brand Accent */
  --accent-primary: #6c63ff;
  --accent-secondary: #00d4ff;
  --accent-gradient: linear-gradient(135deg, #6c63ff 0%, #00d4ff 100%);
  --accent-gradient-soft: linear-gradient(135deg, rgba(108,99,255,0.15) 0%, rgba(0,212,255,0.15) 100%);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: #a0a0b8;
  --text-muted: #606078;

  /* Typography */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Spacing */
  --section-padding: 100px 0;
  --container-max: 1200px;
  --container-padding: 0 24px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  /* Shadows */
  --shadow-glow: 0 0 40px rgba(108, 99, 255, 0.2);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-button: 0 4px 24px rgba(108, 99, 255, 0.4);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Navbar height */
  --navbar-height: 72px;
}