/* Modern Theme Configuration 2024 */
:root {
    /* Color System - Base Colors */
    --colors-primary-50: rgb(238 242 255);
    --colors-primary-100: rgb(224 231 255);
    --colors-primary-200: rgb(199 210 254);
    --colors-primary-300: rgb(165 180 252);
    --colors-primary-400: rgb(129 140 248);
    --colors-primary-500: rgb(99 102 241);
    --colors-primary-600: rgb(79 70 229);
    --colors-primary-700: rgb(67 56 202);
    --colors-primary-800: rgb(55 48 163);
    --colors-primary-900: rgb(49 46 129);
    
    /* Brand Colors */
    --brand-primary: rgb(67 56 202); /* Indigo 700 - Darker for better contrast */
    --brand-primary-light: rgb(99 102 241); /* Indigo 500 */
    --brand-primary-dark: rgb(49 46 129); /* Indigo 900 */
    --brand-accent: rgb(37 99 235); /* Blue 600 */
    --brand-accent-light: rgb(59 130 246); /* Blue 500 */
    --brand-primary-contrast: white;
    
    /* Brand Gradients */
    --gradient-hero: linear-gradient(135deg, rgb(67 56 202) 0%, rgb(29 78 216) 100%);
    --gradient-hero-overlay: linear-gradient(to bottom, rgba(29, 78, 216, 0) 0%, rgba(29, 78, 216, 0.9) 100%);
    --gradient-primary: linear-gradient(135deg, rgb(67 56 202) 0%, rgb(49 46 129) 100%);
    --gradient-accent: linear-gradient(135deg, rgb(37 99 235) 0%, rgb(67 56 202) 100%);
    --gradient-text: linear-gradient(135deg, rgb(96 165 250) 0%, rgb(37 99 235) 100%);
    
    /* Glass Effects */
    --glass-white: rgba(255, 255, 255, 0.1);
    --glass-dark: rgba(17, 24, 39, 0.7);
    --glass-border-light: rgba(255, 255, 255, 0.1);
    --glass-border-dark: rgba(255, 255, 255, 0.05);
    --glass-blur: blur(12px);
    
    /* Semantic Colors */
    --colors-success-light: rgb(34 197 94);
    --colors-success: rgb(22 163 74);
    --colors-success-dark: rgb(21 128 61);
    
    --colors-warning-light: rgb(234 179 8);
    --colors-warning: rgb(202 138 4);
    --colors-warning-dark: rgb(161 98 7);
    
    --colors-error-light: rgb(239 68 68);
    --colors-error: rgb(220 38 38);
    --colors-error-dark: rgb(185 28 28);
    
    --colors-info-light: rgb(59 130 246);
    --colors-info: rgb(37 99 235);
    --colors-info-dark: rgb(29 78 216);
  
    /* Neutral Colors */
    --colors-gray-50: rgb(249 250 251);
    --colors-gray-100: rgb(243 244 246);
    --colors-gray-200: rgb(229 231 235);
    --colors-gray-300: rgb(209 213 219);
    --colors-gray-400: rgb(156 163 175);
    --colors-gray-500: rgb(107 114 128);
    --colors-gray-600: rgb(75 85 99);
    --colors-gray-700: rgb(55 65 81);
    --colors-gray-800: rgb(31 41 55);
    --colors-gray-900: rgb(17 24 39);
  
    /* Surface Colors */
    --surface-ground: white;
    --surface-card: white;
    --surface-overlay: white;
    --surface-border: var(--colors-gray-200);
    
    /* Text Colors */
    --text-primary: var(--colors-gray-900);
    --text-secondary: var(--colors-gray-700);
    --text-tertiary: var(--colors-gray-500);
    --text-disabled: var(--colors-gray-400);
    --text-on-primary: var(--brand-primary-contrast);
    --text-on-dark: var(--colors-gray-100);
    
    /* State Colors */
    --state-hover: var(--colors-gray-100);
    --state-focus: var(--colors-primary-100);
    --state-selected: var(--colors-primary-50);
    --state-disabled: var(--colors-gray-100);
  
    /* Typography System */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'Fira Code', 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace;
    --font-display: 'Plus Jakarta Sans', var(--font-sans);
  
    /* Font Scale (Major Third: 1.25) */
    --text-xs: clamp(0.64rem, 0.17vw + 0.76rem, 0.75rem);
    --text-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.875rem);
    --text-base: clamp(1rem, 0.34vw + 0.91rem, 1.125rem);
    --text-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.4rem);
    --text-xl: clamp(1.56rem, 1vw + 1.31rem, 1.75rem);
    --text-2xl: clamp(1.95rem, 1.56vw + 1.56rem, 2.19rem);
    --text-3xl: clamp(2.44rem, 2.38vw + 1.85rem, 2.73rem);
    --text-4xl: clamp(3.05rem, 3.54vw + 2.17rem, 3.42rem);
  
    /* Fluid Spacing Scale */
    --space-1: clamp(0.25rem, 0.5vw, 0.5rem);
    --space-2: clamp(0.5rem, 1vw, 0.75rem);
    --space-3: clamp(0.75rem, 1.5vw, 1rem);
    --space-4: clamp(1rem, 2vw, 1.5rem);
    --space-6: clamp(1.5rem, 3vw, 2rem);
    --space-8: clamp(2rem, 4vw, 3rem);
    --space-12: clamp(3rem, 6vw, 4rem);
    --space-16: clamp(4rem, 8vw, 6rem);
  
    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
  
    /* Elevation (Shadows) */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    
    /* Motion */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Z-index Scale */
    --z-negative: -1;
    --z-elevate: 1;
    --z-sticky: 100;
    --z-drawer: 200;
    --z-modal: 300;
    --z-popover: 400;
    --z-toast: 500;
    --z-tooltip: 600;
  }
  
  /* Dark Mode Overrides */
  @media (prefers-color-scheme: dark) {
    :root {
      /* Surface Colors */
      --surface-ground: var(--colors-gray-900);
      --surface-card: var(--colors-gray-800);
      --surface-overlay: var(--colors-gray-700);
      --surface-border: var(--colors-gray-600);
      
      /* Text Colors */
      --text-primary: white;
      --text-secondary: var(--colors-gray-300);
      --text-tertiary: var(--colors-gray-400);
      --text-disabled: var(--colors-gray-500);
      --text-on-dark: var(--colors-gray-100);
      
      /* State Colors */
      --state-hover: var(--colors-gray-700);
      --state-focus: var(--colors-primary-500);
      --state-selected: var(--colors-primary-600);
      --state-disabled: var(--colors-gray-600);
  
      /* Gradient Adjustments */
      --gradient-hero: linear-gradient(135deg, rgb(67 56 202) 0%, rgb(29 78 216) 100%);
      --gradient-hero-overlay: linear-gradient(to bottom, rgba(29, 78, 216, 0) 0%, rgba(29, 78, 216, 0.95) 100%);
      --gradient-primary: linear-gradient(135deg, rgb(99 102 241) 0%, rgb(67 56 202) 100%);
      --gradient-accent: linear-gradient(135deg, rgb(59 130 246) 0%, rgb(79 70 229) 100%);
    }
  }
  
  /* Light Mode (Default) Colors */
  :root {
    --surface-ground: white;
    --surface-card: white;
    --surface-overlay: white;
    --surface-border: var(--colors-gray-200);
    
    --text-primary: var(--colors-gray-900);
    --text-secondary: var(--colors-gray-700);
    --text-tertiary: var(--colors-gray-500);
    --text-disabled: var(--colors-gray-400);
    
    --state-hover: var(--colors-gray-100);
    --state-focus: var(--colors-primary-100);
    --state-selected: var(--colors-primary-50);
    --state-disabled: var(--colors-gray-100);
  }
  
  /* Base Styles */
  :root {
    color-scheme: light dark;
    font-family: var(--font-sans);
    line-height: 1.5;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--surface-ground);
    color: var(--text-primary);
  }
  
  /* Modern Component Styles */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-normal);
    cursor: pointer;
    user-select: none;
  }
  
  .btn-primary {
    background-color: var(--brand-primary);
    color: var(--brand-primary-contrast);
  }
  
  .btn-primary:hover {
    background-color: var(--brand-primary-dark);
    transform: translateY(-1px);
  }
  
  .btn-primary:active {
    transform: translateY(0);
  }
  
  .btn-secondary {
    background-color: var(--surface-overlay);
    color: var(--text-primary);
    border: 1px solid var(--surface-border);
  }
  
  .btn-secondary:hover {
    background-color: var(--state-hover);
    border-color: var(--surface-border);
  }
  
  /* Card Component */
  .card {
    background-color: var(--surface-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
  }
  
  .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
  }
  
  /* Modern Glass Effect */
  .glass {
    background: var(--glass-white);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border-light);
    box-shadow: var(--shadow-lg);
  }
  
  @media (prefers-color-scheme: dark) {
    .glass {
      background: var(--glass-dark);
      border-color: var(--glass-border-dark);
    }
  }
  
  /* Animation Utilities */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }
  
  .animate-slide-up {
    animation: slideUp 0.4s ease-out;
  }
  
  .animate-scale {
    animation: scale 0.2s ease-out;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes slideUp {
    from { 
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  @keyframes scale {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  /* Gradient Backgrounds */
  .bg-gradient-primary {
    background: var(--gradient-primary);
  }
  
  .bg-gradient-primary-light {
    background: var(--gradient-primary-light);
  }
  
  .bg-gradient-primary-dark {
    background: var(--gradient-primary-dark);
  }
  
  .bg-gradient-surface {
    background: var(--gradient-surface);
  }
  
  /* Focus Styles for Accessibility */
  :focus-visible {
    outline: 2px solid var(--state-focus);
    outline-offset: 2px;
  }
  
  /* Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }