/* ==========================================================================
   TITAN GYM - DESIGN SYSTEM VARIABLES (variables.css)
   ========================================================================== */

:root {
  /* Color Palette - Modern Energetic Dark Theme */
  --bg-main: #0a0c0f;
  --bg-surface: #12151b;
  --bg-surface-elevated: #1a1e27;
  --bg-card: #161a23;
  --bg-card-hover: #202634;
  --bg-overlay: rgba(10, 12, 15, 0.85);

  /* Brand Accents */
  --color-accent: #ccff00; /* Volt Lime */
  --color-accent-hover: #b3e600;
  --color-accent-glow: rgba(204, 255, 0, 0.25);
  --color-accent-dim: rgba(204, 255, 0, 0.12);
  --color-secondary-accent: #ff3e3e; /* Fire Red */

  /* Text Colors */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0a0c0f;

  /* UI Borders & Dividers */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(204, 255, 0, 0.5);

  /* Typography */
  --font-heading: 'Bebas Neue', 'Oswald', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacings */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Border Radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px var(--color-accent-glow);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* Header & Z-indexes */
  --header-height: 80px;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 150;
  --z-toast: 300;
}