/*
  CSS Custom Properties (Variables)
  Design system foundation - update values as needed for your brand
*/

:root {
  /* Colors - RunRush Brand */
  --color-primary: #DD1646;
  --color-primary-dark: #B91C3C;
  --color-primary-light: #F87171;
  
  --color-secondary: #6c757d;
  --color-secondary-dark: #495057;
  --color-secondary-light: #adb5bd;
  
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-error: #dc3545;
  --color-info: #17a2b8;
  
  /* Neutral Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #f8f9fa;
  --color-gray-200: #e9ecef;
  --color-gray-300: #dee2e6;
  --color-gray-400: #ced4da;
  --color-gray-500: #adb5bd;
  --color-gray-600: #6c757d;
  --color-gray-700: #495057;
  --color-gray-800: #343a40;
  --color-gray-900: #212529;
  
  /* Background Colors */
  --bg-primary: #0F1113;
  --bg-secondary: #1C1D1F;
  --bg-dark: #000000;
  
  /* Text Colors */
  --text-primary: var(--color-white);
  --text-secondary: var(--color-gray-300);
  --text-muted: var(--color-gray-500);
  --text-inverse: var(--color-gray-900);
  
  /* Typography */
  --font-family-primary: 'Supreme', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-family-secondary: Georgia, 'Times New Roman', Times, serif;
  --font-family-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', Consolas, 'Courier New', monospace;
  
  /* Font Weights - Mapped to Supreme font family */
  --font-weight-light: 400; /* Supreme Regular (fallback) */
  --font-weight-normal: 400; /* Supreme Regular */
  --font-weight-medium: 500; /* Supreme Medium */
  --font-weight-semibold: 500; /* Supreme Medium (fallback) */
  --font-weight-bold: 700; /* Supreme Bold */
  
  /* Font Sizes - Fluid Typography */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --font-size-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --font-size-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-size-3xl: clamp(2rem, 1.7rem + 1.5vw, 2.5rem);
  --font-size-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  --font-size-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
  
  /* Custom sizes for design specs */
  --font-size-16: 1rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-64: 4rem;
  
  /* Line Heights */
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing Scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  
  /* Container Widths */
  --container-sm: 540px;
  --container-md: 720px;
  --container-lg: 960px;
  --container-xl: 1140px;
  --container-2xl: 1300px;
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 0.125rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-full: 9999px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  
  /* Transitions */
  --transition-fast: 150ms ease-in-out;
  --transition-normal: 250ms ease-in-out;
  --transition-slow: 350ms ease-in-out;
  
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1050;
  --z-popover: 1070;
  --z-tooltip: 1080;
  
  /* Breakpoints (for JavaScript) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

/* Disable automatic dark mode adaptation - RunRush has intentional dark design */