/* ===== CSS CUSTOM PROPERTIES & THEMES ===== */

:root {
  /* === COLOR PALETTE === */
  --primary-color: #1a73e8;
  --primary-hover: #1557b0;
  --primary-light: #4285f4;
  
  --success-color: #27ae60;
  --success-hover: #229954;
  --success-light: #2ecc71;
  --error-color: #e74c3c;
  --error-light: #c0392b;
  --warning-color: #f39c12;
  --warning-light: #e67e22;
  
  /* === LIGHT THEME (DEFAULT) === */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-overlay: rgba(255, 255, 255, 0.95);
  
  --text-primary: #212529;
  --text-secondary: #4a5562;
  --text-muted: #5a6570;
  --text-inverse: #ffffff;
  
  --border-color: #dee2e6;
  --border-light: #e9ecef;
  --border-dark: #adb5bd;
  
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --shadow-xl: 0 2.5rem 5rem rgba(0, 0, 0, 0.25);
  
  /* === SPACING SCALE === */
  --space-xs: 0.25rem;   /* 4px */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 0.75rem;   /* 12px */
  --space-lg: 1rem;      /* 16px */
  --space-xl: 1.5rem;    /* 24px */
  --space-2xl: 2rem;     /* 32px */
  --space-3xl: 3rem;     /* 48px */
  --space-4xl: 4rem;     /* 64px */
  
  /* === TYPOGRAPHY === */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
  
  --font-size-xs: 0.75rem;   /* 12px */
  --font-size-sm: 0.875rem;  /* 14px */
  --font-size-base: 1rem;    /* 16px */
  --font-size-lg: 1.125rem;  /* 18px */
  --font-size-xl: 1.25rem;   /* 20px */
  --font-size-2xl: 1.5rem;   /* 24px */
  --font-size-3xl: 1.875rem; /* 30px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* === LAYOUT === */
  --header-height: 4rem;
  --footer-height: 3.5rem;
  --sidebar-width: 16rem;
  --container-max-width: 75rem;
  
  /* === BORDERS & RADIUS === */
  --border-radius-sm: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;
  --border-radius-2xl: 1rem;
  --border-radius-full: 50%;
  
  /* === 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-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* === DARK THEME === */
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #3a3a3a;
  --bg-overlay: rgba(26, 26, 26, 0.95);
  
  --text-primary: #ffffff;
  --text-secondary: #cccccc;
  --text-muted: #999999;
  --text-inverse: #000000;
  
  --border-color: #555555;
  --border-light: #444444;
  --border-dark: #666666;
  
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 2.5rem 5rem rgba(0, 0, 0, 0.6);
}

/* === HIGH CONTRAST THEME === */
[data-theme="high-contrast"] {
  --bg-primary: #000000;
  --bg-secondary: #1a1a1a;
  --bg-tertiary: #333333;
  
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  --text-muted: #cccccc;
  
  --primary-color: #00ffff;
  --success-color: #00ff00;
  --error-color: #ff0000;
  --warning-color: #ffff00;
  
  --border-color: #ffffff;
  --border-light: #cccccc;
  --border-dark: #ffffff;
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-normal: 0ms;
    --transition-slow: 0ms;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === THEME TRANSITION === */
* {
  transition: 
    background-color var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal),
    box-shadow var(--transition-normal);
}

/* === SYSTEM THEME DETECTION === */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-overlay: rgba(26, 26, 26, 0.95);
    
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --text-inverse: #000000;
    
    --border-color: #555555;
    --border-light: #444444;
    --border-dark: #666666;
    
    --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 2.5rem 5rem rgba(0, 0, 0, 0.6);
  }
}