/**
 * CSS Variables - Design Tokens
 * Battlefield REDSEC Guide Website
 * 
 * All colors, spacing, typography, and other design values
 * are defined here as CSS custom properties for consistency
 * across the entire website.
 */

:root {
  /* ============================================
     BRAND COLORS
     ============================================ */
  
  /* Primary Colors (Battlefield Theme) */
  --color-primary: #ff4655;           /* Battlefield Red */
  --color-primary-dark: #cc3844;      /* Darker red for hover */
  --color-primary-light: #ff6b77;     /* Lighter red */
  
  /* Secondary Colors */
  --color-secondary: #00d4ff;         /* Cyan accent */
  --color-secondary-dark: #00a8cc;    /* Darker cyan */
  --color-secondary-light: #33ddff;   /* Lighter cyan */
  
  /* Neutral Colors - Dark Theme Base */
  --color-dark: #0a0e27;              /* Deep navy background */
  --color-dark-alt: #1a1e3f;          /* Slightly lighter navy */
  --color-dark-surface: #252b54;      /* Surface elements */
  
  /* Neutral Colors - Light Theme (for contrast areas) */
  --color-light: #f5f5f5;             /* Light gray */
  --color-light-alt: #e8e8e8;         /* Slightly darker gray */
  --color-white: #ffffff;             /* Pure white */
  
  /* Text Colors */
  --color-text-primary: #e5e5e5;      /* Light text on dark bg */
  --color-text-secondary: #a0a0a0;    /* Muted/secondary text */
  --color-text-muted: #707070;        /* Very muted text */
  --color-text-dark: #2c3e50;         /* Dark text on light bg */
  
  /* Semantic Colors */
  --color-success: #10b981;           /* Green - success/active */
  --color-warning: #f59e0b;           /* Orange - warning */
  --color-error: #ef4444;             /* Red - error/danger */
  --color-info: #3b82f6;              /* Blue - information */
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  /* Font Families */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 
                  'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --font-heading: 'Rajdhani', 'Inter', sans-serif;
  --font-mono: 'Courier New', 'Courier', monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.875rem;     /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg: 1.125rem;     /* 18px */
  --text-xl: 1.25rem;      /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  
  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* ============================================
     SPACING
     ============================================ */
  
  --spacing-0: 0;
  --spacing-1: 0.25rem;    /* 4px */
  --spacing-2: 0.5rem;     /* 8px */
  --spacing-3: 0.75rem;    /* 12px */
  --spacing-4: 1rem;       /* 16px */
  --spacing-5: 1.25rem;    /* 20px */
  --spacing-6: 1.5rem;     /* 24px */
  --spacing-8: 2rem;       /* 32px */
  --spacing-10: 2.5rem;    /* 40px */
  --spacing-12: 3rem;      /* 48px */
  --spacing-16: 4rem;      /* 64px */
  --spacing-20: 5rem;      /* 80px */
  --spacing-24: 6rem;      /* 96px */
  --spacing-32: 8rem;      /* 128px */
  
  /* Semantic Spacing */
  --spacing-xs: var(--spacing-2);   /* 8px */
  --spacing-sm: var(--spacing-4);   /* 16px */
  --spacing-md: var(--spacing-8);   /* 32px */
  --spacing-lg: var(--spacing-12);  /* 48px */
  --spacing-xl: var(--spacing-16);  /* 64px */
  --spacing-2xl: var(--spacing-24); /* 96px */
  
  /* ============================================
     LAYOUT
     ============================================ */
  
  /* Container Widths */
  --max-width-sm: 640px;
  --max-width-md: 768px;
  --max-width-lg: 1024px;
  --max-width-xl: 1280px;
  --max-width-2xl: 1536px;
  --max-width: 1000px;              /* Default container (reduced for better readability) */
  --max-width-wide: 1200px;         /* Wide container */
  
  /* Component Heights */
  --header-height: 70px;
  --header-height-mobile: 60px;
  --footer-height: auto;
  
  /* ============================================
     BORDERS
     ============================================ */
  
  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* Border Widths */
  --border-width: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  
  /* Border Colors */
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-light: rgba(255, 255, 255, 0.2);
  --border-color-dark: rgba(0, 0, 0, 0.1);
  
  /* ============================================
     SHADOWS
     ============================================ */
  
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.3);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  
  /* Glow Effects */
  --glow-primary: 0 0 20px rgba(255, 70, 85, 0.4);
  --glow-secondary: 0 0 20px rgba(0, 212, 255, 0.4);
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Transition Properties */
  --transition-all: all var(--transition-normal);
  --transition-colors: color var(--transition-fast), 
                       background-color var(--transition-fast), 
                       border-color var(--transition-fast);
  --transition-transform: transform var(--transition-normal);
  --transition-opacity: opacity var(--transition-normal);
  
  /* ============================================
     Z-INDEX
     ============================================ */
  
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  
  /* ============================================
     BREAKPOINTS (Reference only - use in @media)
     ============================================ */
  
  /* 
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  */
  
  /* ============================================
     GRADIENTS
     ============================================ */
  
  --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  --gradient-dark: linear-gradient(135deg, var(--color-dark) 0%, var(--color-dark-alt) 100%);
  --gradient-hero: linear-gradient(135deg, #0a0e27 0%, #1a1e3f 50%, #252b54 100%);
  
  /* Overlay Gradients */
  --gradient-overlay-dark: linear-gradient(to bottom, rgba(10, 14, 39, 0) 0%, rgba(10, 14, 39, 0.8) 100%);
  --gradient-overlay-primary: linear-gradient(135deg, rgba(255, 70, 85, 0.1) 0%, rgba(255, 70, 85, 0) 100%);
  
  /* ============================================
     OPACITY
     ============================================ */
  
  --opacity-0: 0;
  --opacity-10: 0.1;
  --opacity-20: 0.2;
  --opacity-30: 0.3;
  --opacity-40: 0.4;
  --opacity-50: 0.5;
  --opacity-60: 0.6;
  --opacity-70: 0.7;
  --opacity-80: 0.8;
  --opacity-90: 0.9;
  --opacity-100: 1;
  
  /* ============================================
     BACKDROP BLUR
     ============================================ */
  
  --blur-none: 0;
  --blur-sm: 4px;
  --blur-md: 8px;
  --blur-lg: 16px;
  --blur-xl: 24px;
}

/* ============================================
   DARK MODE OVERRIDES (Future-proof)
   ============================================ */

@media (prefers-color-scheme: dark) {
  /* Already dark by default, but can add overrides here if needed */
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  :root {
    --color-primary: #000000;
    --color-secondary: #000000;
    --color-text-primary: #000000;
    --color-dark: #ffffff;
  }
}