/*
 * Fueled.com Clone - Design Tokens
 * ================================
 * Extracted from https://fueled.com
 * Font substitution: Aeonik → Inter + Space Grotesk
 */

:root {
  /* ==================== COLORS ==================== */

  /* Core */
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Primary Accents - Fueled Brand */
  --color-primary: #372b8e;
  /* Deep Purple */
  --color-secondary: #e0adfc;
  /* Light Lavender */
  --color-navy: #1D1B4C;
  /* Keep Navy for deep backgrounds if needed, or update */
    --color-tags: #5d00f8;

  /* Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #d6d6d6;
  --color-text-muted: #9CA3AF;

  /* Grayscale */
  --color-gray-900: #171717;
  --color-gray-800: #3D3D3D;
  --color-gray-500: #6D6D6D;
  --color-gray-400: #9CA3AF;
  --color-gray-300: #D1D5DB;

  /* Backgrounds */
  --bg-primary: #000000;
  --bg-secondary: #171717;
  --bg-card: #171717;

  /* Gradients */
  --gradient-button: linear-gradient(85deg, #ffffff 4.29%, #ffffff 104.48%);
  
  /* ==================== TYPOGRAPHY ==================== */

  /* Font Families */
  --font-primary: 'Simpler', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Simpler', sans-serif;

  /* Font Sizes - Fluid Typography (matching original clamp values) */
  --text-h1: clamp(40px, 2.5rem + ((1vw - 3.9px) * 1.237), 52px);
  --text-h2: clamp(32px, 2rem + ((1vw - 3.9px) * 1.649), 48px);
  --text-h3: clamp(24px, 1.5rem + ((1vw - 3.9px) * 0.824), 32px);
  --text-h4: clamp(20px, 1.25rem + ((1vw - 3.9px) * 0.412), 24px);
  --text-body-lg: clamp(18px, 1.125rem + ((1vw - 3.9px) * 0.206), 20px);
  --text-body: clamp(16px, 1rem + ((1vw - 3.9px) * 0.206), 18px);
  --text-body-sm: 14px;
  --text-caption: 12px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-semibold: 700;
  --font-weight-bold: 700;

  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Letter Spacing */
  --letter-spacing-tight: -1px;
  --letter-spacing-normal: -0.24px;
  --letter-spacing-wide: 0.05em;

  /* ==================== SPACING ==================== */

  /* Base spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Fluid spacing */
  --space-section: clamp(40px, 23.9175px + 4.1237vw, 80px);
  --space-section-lg: clamp(80px, 60px + 5vw, 120px);
  --space-section-xl: clamp(160px, 103.7113px + 14.433vw, 300px);

  /* ==================== LAYOUT ==================== */

  /* Container widths */
  --container-narrow: 800px;
  --container-standard: 1076px;
  --container-wide: 1360px;
  --container-max: 1440px;

  /* Container padding */
  --container-padding: clamp(16px, 4vw, 32px);

  /* Header */
  --header-height: 94px;

  /* ==================== BORDERS ==================== */

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-full: 999px;

  /* ==================== SHADOWS ==================== */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --shadow-glow: -12px 18px 18px 0px rgba(0, 209, 255, 0.05),
    12px 18px 18px 0px rgba(0, 255, 230, 0.05);
  --shadow-purple: 0 0 40px rgba(0, 209, 255, 0.3);

  /* ==================== TRANSITIONS ==================== */

  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;

  /* Cubic bezier for smooth animations */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ==================== Z-INDEX ==================== */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 500;
}