/* Design Tokens - CSS Custom Properties */
:root {
  /* Colors */
  --color-primary: #008bd2;
  --color-primary-hover: #0077b3;
  --color-danger: #dc3545;
  --color-danger-hover: #c82333;
  --color-success: #28a745;
  --color-warning: #ffc107;
  --color-secondary: #6c757d;
  --color-secondary-hover: #5a6268;
  
  /* Neutral Colors */
  --color-white: #fff;
  --color-black: #000;
  --color-text-primary: #333;
  --color-text-secondary: #555;
  --color-text-light: #666;
  
  /* Background Colors */
  --color-bg-primary: #fff;
  --color-bg-secondary: #f8f9fa;
  --color-bg-section: #f9f9f9;
  --color-bg-hover: #f5f5f5;
  --color-bg-modal: rgba(0, 0, 0, 0.5);
  --color-bg-hero-overlay: rgba(0, 0, 0, 0.3);
  
  /* Border Colors */
  --color-border-primary: #e0e0e0;
  --color-border-secondary: #ddd;
  --color-border-light: #ccc;
  --color-border-focus: #008bd2;
  
  /* Typography */
  --font-family-base: Arial, sans-serif;
  --font-family-heading: 'Playfair Display', Georgia, serif;
  --font-family-body: 'Raleway', Arial, sans-serif;
  
  /* Font Sizes */
  --font-size-xs: 0.4rem;
  --font-size-sm: 0.6rem;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-xxl: 22px;
  --font-size-xxxl: 24px;
  
  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 10px;
  --spacing-lg: 12px;
  --spacing-xl: 15px;
  --spacing-xxl: 16px;
  --spacing-xxxl: 20px;
  --spacing-3xl: 2rem;
  --spacing-4xl: 24px;
  --spacing-5xl: 40px;
  
  /* Layout */
  --header-height: 80px;
  --sidebar-width: 250px;
  --container-max-width: 1800px;
  --container-dashboard-max-width: 1400px;
  --modal-max-width: 1400px;
  --image-preview-size: 120px;
  
  /* Shadows */
  --shadow-xs: 0 2px 4px rgba(0, 139, 210, 0.1);
  --shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
  --shadow-focus: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
  
  /* Borders */
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-width: 1px;
  --border-width-thick: 2px;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index */
  --z-index-dropdown: 100;
  --z-index-sticky: 500;
  --z-index-modal: 1000;
  --z-index-popup: 1001;
  --z-index-tooltip: 1002;
  
  /* Breakpoints (for use in media queries) */
  --breakpoint-xs: 380px;
  --breakpoint-sm: 600px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  --breakpoint-xxxl: 1460px;
  --breakpoint-navigation: 1100px;
  
  /* Responsive font sizes (using clamp) */
  --font-size-responsive-xs: clamp(0.4rem, 0.5vw, 0.6rem);
  --font-size-responsive-sm: clamp(0.6rem, 0.8vw, 1rem);
  --font-size-responsive-hero: clamp(1.5rem, 1.2rem + 2vw, 3rem);
  --font-size-responsive-tpr: clamp(32px, 55px + 1vw, 60px);
  --font-size-responsive-nav: clamp(16px, 2vw, 24px);
  
  /* Responsive spacing */
  --spacing-responsive-sm: clamp(0.5rem, 1vw, 1rem);
  --spacing-responsive-md: clamp(10px, 3vw, 20px);
  
  /* Responsive heights */
  --height-responsive-logo: clamp(60px, 8vw, 120px);
  --height-responsive-hero: clamp(300px, 60vh, 800px);
}

/* Dark mode variables (future-proofing) - commented out until dark mode is implemented
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #2d2d2d;
    --color-bg-section: #333;
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #b0b0b0;
    --color-border-primary: #404040;
    --color-border-secondary: #505050;
  }
}
*/