/**
 * ============================================
 * BUYSMART DESIGN TOKENS (CSS Variables)
 * ============================================
 * 
 * Centralized design system based on patterns from:
 * - Material Design (semantic naming)
 * - Tailwind CSS (consistent scale)
 * - Elementor (component scoping)
 * 
 * Organization:
 * 1. Color System
 * 2. Typography
 * 3. Spacing Scale
 * 4. Border Radius
 * 5. Shadows & Effects
 * 6. Transitions
 * 7. Z-Index Scale
 * 8. Layout (Breakpoints, Container widths)
 */

:root {
  /* ============================================
     1. COLOR SYSTEM
     ============================================ */
  
  /* Brand Colors */
  --bs-color-primary: #0073aa;
  --bs-color-primary-hover: #005a87;
  --bs-color-primary-light: #e6f4ff;
  --bs-color-primary-dark: #004466;
  
  --bs-color-secondary: #4F7EFF;
  --bs-color-secondary-hover: #052768;
  --bs-color-secondary-light: #f5f8ff;
  
  --bs-color-footer-bg: #002d88;
  --bs-color-footer-hover: #ffdd00;
  
  /* Neutral Colors (Grayscale) */
  --bs-color-white: #ffffff;
  --bs-color-black: #000000;
  
  --bs-color-gray-50: #f9f9f9;
  --bs-color-gray-100: #f8f8f8;
  --bs-color-gray-200: #f5f5f5;
  --bs-color-gray-300: #f0f0f0;
  --bs-color-gray-400: #e5e5e5;
  --bs-color-gray-500: #ddd;
  --bs-color-gray-600: #d5d5d5;
  --bs-color-gray-700: #999;
  --bs-color-gray-800: #666;
  --bs-color-gray-900: #444;
  --bs-color-gray-950: #333;
  
  /* Semantic Colors */
  --bs-color-text-primary: #000000;
  --bs-color-text-secondary: #333333;
  --bs-color-text-muted: #666666;
  --bs-color-text-disabled: #999999;
  --bs-color-text-inverse: #ffffff;
  
  --bs-color-success: #7ad03a;
  --bs-color-error: #a00;
  --bs-color-warning: #ffba00;
  --bs-color-info: #0073aa;
  
  /* Background Colors */
  --bs-color-bg-primary: #ffffff;
  --bs-color-bg-secondary: #f8f8f8;
  --bs-color-bg-tertiary: #f9f9f9;
  --bs-color-bg-hover: #f0f8ff;
  --bs-color-bg-active: #e6f4ff;
  
  /* Border Colors */
  --bs-color-border-light: #f0f0f0;
  --bs-color-border-default: #ddd;
  --bs-color-border-medium: #d5d5d5;
  --bs-color-border-dark: #000;
  --bs-color-border-focus: #0073aa;
  
  /* ============================================
     2. TYPOGRAPHY
     ============================================ */
  
  /* Font Families */
  --bs-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-family-heading: inherit;
  --bs-font-family-mono: "Courier New", Courier, monospace;
  
  /* Font Sizes (Mobile-first, scale 1.2 ratio) */
  --bs-font-size-xs: 11px;
  --bs-font-size-sm: 13px;
  --bs-font-size-base: 14px;
  --bs-font-size-md: 15px;
  --bs-font-size-lg: 16px;
  --bs-font-size-xl: 18px;
  --bs-font-size-2xl: 20px;
  --bs-font-size-3xl: 28px;
  
  /* Font Weights */
  --bs-font-weight-normal: 400;
  --bs-font-weight-medium: 500;
  --bs-font-weight-semibold: 600;
  --bs-font-weight-bold: 700;
  
  /* Line Heights */
  --bs-line-height-tight: 1.2;
  --bs-line-height-normal: 1.5;
  --bs-line-height-relaxed: 1.75;
  
  /* Letter Spacing */
  --bs-letter-spacing-tight: -0.02em;
  --bs-letter-spacing-normal: 0;
  --bs-letter-spacing-wide: 0.02em;
  
  /* ============================================
     3. SPACING SCALE (8px grid system)
     ============================================ */
  
  --bs-spacing-0: 0;
  --bs-spacing-1: 4px;
  --bs-spacing-2: 8px;
  --bs-spacing-3: 12px;
  --bs-spacing-4: 16px;
  --bs-spacing-5: 20px;
  --bs-spacing-6: 24px;
  --bs-spacing-7: 30px;
  --bs-spacing-8: 40px;
  --bs-spacing-9: 50px;
  --bs-spacing-10: 60px;
  
  /* ============================================
     4. BORDER RADIUS
     ============================================ */
  
  --bs-radius-none: 0;
  --bs-radius-sm: 6px;
  --bs-radius-md: 8px;
  --bs-radius-lg: 12px;
  --bs-radius-xl: 16px;
  --bs-radius-full: 50%;
  
  /* ============================================
     5. SHADOWS & EFFECTS
     ============================================ */
  
  --bs-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
  --bs-shadow-md: 0 5px 25px rgba(0, 0, 0, 0.05);
  --bs-shadow-lg: 0 -2px 20px rgba(0, 0, 0, 0.1);
  --bs-shadow-focus: 0 0 0 2px rgba(0, 115, 170, 0.1);
  
  /* Overlays */
  --bs-overlay-light: rgba(0, 0, 0, 0.05);
  --bs-overlay-medium: rgba(0, 0, 0, 0.45);
  --bs-overlay-dark: rgba(0, 0, 0, 0.6);
  
  /* Gradients */
  --bs-gradient-dark-bottom: linear-gradient(to top, rgba(0,0,0,0.6), transparent 55%);
  
  /* ============================================
     6. TRANSITIONS
     ============================================ */
  
  --bs-transition-fast: 0.15s ease;
  --bs-transition-base: 0.2s ease;
  --bs-transition-slow: 0.3s ease;
  
  --bs-transition-transform: transform 0.2s ease;
  --bs-transition-colors: background 0.2s ease, color 0.2s ease;
  --bs-transition-all: all 0.2s ease;
  
  /* ============================================
     7. Z-INDEX SCALE
     ============================================ */
  
  --bs-z-index-base: 1;
  --bs-z-index-dropdown: 10;
  --bs-z-index-sticky: 999;
  --bs-z-index-drawer-overlay: 10000;
  --bs-z-index-drawer: 10001;
  
  /* ============================================
     8. LAYOUT
     ============================================ */
  
  /* Breakpoints (for reference in JS or custom properties) */
  --bs-breakpoint-mobile: 480px;
  --bs-breakpoint-tablet: 768px;
  --bs-breakpoint-desktop-sm: 1024px;
  --bs-breakpoint-desktop-md: 1200px;
  --bs-breakpoint-desktop-lg: 1400px;
  
  /* Container Widths */
  --bs-container-sm: 640px;
  --bs-container-md: 1200px;
  --bs-container-lg: 1320px;
  --bs-container-xl: 1400px;
  
  /* Grid Gaps */
  --bs-grid-gap-sm: 12px;
  --bs-grid-gap-md: 16px;
  --bs-grid-gap-lg: 20px;
  --bs-grid-gap-xl: 24px;
  
  /* ============================================
     9. COMPONENT-SPECIFIC TOKENS
     ============================================ */
  
  /* Header */
  --bs-header-icon-size-desktop: 35px;
  --bs-header-icon-size-mobile: 28px;
  --bs-header-bg: var(--bs-color-white);
  --bs-header-border: 1px solid var(--bs-overlay-light);
  --bs-header-shadow: var(--bs-shadow-md);
  --bs-header-z-index: var(--bs-z-index-sticky);
  
  /* Buttons */
  --bs-button-padding-y: 10px;
  --bs-button-padding-x: 18px;
  --bs-button-font-size: var(--bs-font-size-md);
  --bs-button-font-weight: var(--bs-font-weight-semibold);
  --bs-button-border-radius: var(--bs-radius-none);
  --bs-button-transition: var(--bs-transition-colors);
  
  /* Forms */
  --bs-input-height: 44px;
  --bs-input-padding-y: 12px;
  --bs-input-padding-x: 16px;
  --bs-input-font-size: var(--bs-font-size-lg);
  --bs-input-border: 1px solid var(--bs-color-border-default);
  --bs-input-border-radius: var(--bs-radius-md);
  --bs-input-border-focus: var(--bs-color-border-focus);
  --bs-input-shadow-focus: var(--bs-shadow-focus);
  
  /* Cards */
  --bs-card-padding: 20px;
  --bs-card-border: 1px solid var(--bs-color-border-default);
  --bs-card-border-radius: var(--bs-radius-md);
  --bs-card-shadow: var(--bs-shadow-sm);
  --bs-card-bg: var(--bs-color-bg-primary);
  
  /* Footer */
  --bs-footer-bg: var(--bs-color-footer-bg);
  --bs-footer-text: var(--bs-color-text-inverse);
  --bs-footer-hover: var(--bs-color-footer-hover);
}

/* ============================================
   UTILITY CLASSES (Optional - for quick prototyping)
   ============================================ */

/* Text Colors */
.text-primary { color: var(--bs-color-text-primary) !important; }
.text-secondary { color: var(--bs-color-text-secondary) !important; }
.text-muted { color: var(--bs-color-text-muted) !important; }

/* Background Colors */
.bg-primary { background-color: var(--bs-color-bg-primary) !important; }
.bg-secondary { background-color: var(--bs-color-bg-secondary) !important; }

/* Spacing Utilities (Margin/Padding) */
.m-0 { margin: var(--bs-spacing-0) !important; }
.p-0 { padding: var(--bs-spacing-0) !important; }

/* Border Radius */
.rounded-sm { border-radius: var(--bs-radius-sm) !important; }
.rounded-md { border-radius: var(--bs-radius-md) !important; }
.rounded-lg { border-radius: var(--bs-radius-lg) !important; }