:root {
  --color-primary: #1e40af;
  --color-primary-hover: #1e3a8a;
  --color-primary-active: #1e293b;
  --color-primary-light: #3b82f6;
  --color-primary-lighter: #60a5fa;
  --color-primary-lightest: #eff6ff;
  --color-primary-rgb: 30, 64, 175;

  --color-secondary: #d97706;
  --color-secondary-hover: #b45309;
  --color-secondary-active: #92400e;
  --color-secondary-light: #f59e0b;
  --color-secondary-lightest: #fef3c7;
  --color-secondary-rgb: 217, 119, 6;

  --color-accent: #0891b2;
  --color-accent-hover: #0e7490;
  --color-accent-active: #155e75;
  --color-accent-light: #e0f2fe;
  --color-accent-lighter: #f0f9ff;
  --color-accent-rgb: 8, 145, 178;

  --color-purple: #6366f1;
  --color-purple-hover: #4f46e5;
  --color-purple-dark: #4338ca;
  --color-purple-light: #818cf8;
  --color-purple-lightest: #eef2ff;
  --color-purple-rgb: 99, 102, 241;

  --color-success: #059669;
  --color-success-hover: #047857;
  --color-success-light: #d1fae5;
  --color-success-dark: #065f46;
  --color-success-rgb: 5, 150, 105;

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #b45309;
  --color-warning-rgb: 245, 158, 11;

  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #991b1b;
  --color-danger-rgb: 220, 38, 38;

  --color-info: #0891b2;
  --color-info-hover: #0e7490;
  --color-info-light: #cffafe;
  --color-info-dark: #155e75;
  --color-info-rgb: 8, 145, 178;

  --color-text-primary: #0f172a;
  --color-text-secondary: #1e293b;
  --color-text-tertiary: #334155;
  --color-text-quaternary: #475569;
  --color-text-muted: #64748b;
  --color-text-placeholder: #94a3b8;
  --color-text-disabled: #cbd5e1;
  --color-text-inverse: #ffffff;

  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary: #f1f5f9;
  --color-bg-quaternary: #e2e8f0;
  --color-bg-light: #fafbfc;
  --color-bg-hover: #f1f5f9;
  --color-bg-active: #e2e8f0;
  --color-bg-selected: #eff6ff;
  --color-bg-overlay: rgba(15, 23, 42, 0.6);
  --color-bg-overlay-light: rgba(15, 23, 42, 0.4);
  --color-bg-overlay-dark: rgba(15, 23, 42, 0.8);

  --color-bg-dark: #0f172a;
  --color-bg-dark-secondary: #1e293b;
  --color-bg-dark-tertiary: #334155;
  --color-bg-dark-hover: #475569;

  --color-border-lightest: #f8fafc;
  --color-border-light: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-secondary: #cbd5e1;
  --color-border-tertiary: #94a3b8;
  --color-border-dark: #64748b;
  --color-border-darker: #475569;

  --gradient-primary: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #0891b2 100%);
  --gradient-primary-90: linear-gradient(90deg, #1e40af, #3b82f6);
  --gradient-primary-120: linear-gradient(120deg, #1e40af 0%, #2563eb 50%, #3b82f6 100%);
  --gradient-primary-reverse: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
  --gradient-primary-vertical: linear-gradient(180deg, #1e40af 0%, #3b82f6 100%);

  --gradient-accent: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  --gradient-accent-reverse: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);

  --gradient-purple: linear-gradient(135deg, #6366f1 0%, #818cf8 50%, #a5b4fc 100%);
  --gradient-purple-reverse: linear-gradient(135deg, #a5b4fc 0%, #818cf8 50%, #6366f1 100%);

  --gradient-dark: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  --gradient-dark-vertical: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  --gradient-dark-reverse: linear-gradient(135deg, #334155 0%, #1e293b 50%, #0f172a 100%);

  --gradient-overlay: linear-gradient(120deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.75) 40%, rgba(51, 65, 85, 0.3) 100%);
  --gradient-overlay-vertical: linear-gradient(180deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.5) 100%);

  --shadow-xs: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.1);
  --shadow-base: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.12);
  --shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.15);
  --shadow-xl: 0 16px 40px rgba(15, 23, 42, 0.2);
  --shadow-2xl: 0 24px 56px rgba(15, 23, 42, 0.25);

  --shadow-primary: 0 8px 24px rgba(var(--color-primary-rgb), 0.35);
  --shadow-primary-lg: 0 12px 32px rgba(var(--color-primary-rgb), 0.45);
  --shadow-secondary: 0 8px 24px rgba(var(--color-secondary-rgb), 0.35);
  --shadow-accent: 0 8px 24px rgba(var(--color-accent-rgb), 0.35);
  --shadow-purple: 0 8px 24px rgba(var(--color-purple-rgb), 0.4);

  --shadow-inset: inset 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-focus: 0 0 0 4px rgba(var(--color-primary-rgb), 0.2);
  --shadow-focus-accent: 0 0 0 4px rgba(var(--color-accent-rgb), 0.2);

  --shadow-text-sm: 0 2px 8px rgba(15, 23, 42, 0.8), 0 4px 16px rgba(15, 23, 42, 0.9);
  --shadow-text-md: 0 4px 12px rgba(15, 23, 42, 0.9), 0 8px 24px rgba(15, 23, 42, 0.95);

  --opacity-hover: 0.9;
  --opacity-disabled: 0.5;
  --opacity-overlay: 0.6;
  --opacity-muted: 0.7;

  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
}

[data-theme="dark"] {
  --color-text-primary: #f8fafc;
  --color-text-secondary: #e2e8f0;
  --color-text-tertiary: #cbd5e1;
  --color-text-quaternary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-placeholder: #475569;
  --color-text-disabled: #334155;
  --color-text-inverse: #0f172a;

  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;
  --color-bg-quaternary: #475569;
  --color-bg-light: #334155;
  --color-bg-hover: #475569;
  --color-bg-active: #64748b;
  --color-bg-selected: #1e3a5f;

  --color-border-lightest: #1e293b;
  --color-border-light: #334155;
  --color-border: #475569;
  --color-border-secondary: #64748b;
  --color-border-tertiary: #475569;
  --color-border-dark: #94a3b8;

  --color-bg-dark: #020617;
  --color-bg-dark-secondary: #0f172a;

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.6);
  --shadow-base: 0 4px 12px rgba(0, 0, 0, 0.7);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.85);
  --shadow-2xl: 0 24px 56px rgba(0, 0, 0, 0.9);

  --color-primary: #3b82f6;
  --color-primary-rgb: 59, 130, 246;
  --color-secondary: #fbbf24;
  --color-secondary-rgb: 251, 191, 36;
  
  --shadow-primary: 0 8px 24px rgba(var(--color-primary-rgb), 0.5);
  --shadow-primary-lg: 0 12px 32px rgba(var(--color-primary-rgb), 0.6);
}

.high-contrast {
  --color-text-primary: #000000;
  --color-text-secondary: #0f172a;
  --color-text-tertiary: #1e293b;
  
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  
  --color-border: #000000;
  --color-border-secondary: #1e293b;
  
  --color-primary: #1e3a8a;
  --color-secondary: #92400e;
  --color-danger: #991b1b;
  
  --color-success: #065f46;
}

@media print {
  :root {
    --color-text-primary: #000000;
    --color-text-secondary: #1e293b;
    --color-text-tertiary: #475569;
    
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #ffffff;
    
    --color-primary: #1e40af;
    --color-secondary: #d97706;
    
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-base: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-2xl: none;
    --shadow-primary: none;
    --shadow-primary-lg: none;
    --shadow-secondary: none;
    --shadow-accent: none;
    --shadow-purple: none;
    --shadow-focus: none;
    --shadow-focus-accent: none;
  }
}

html {
  transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme] *,
html[data-theme] *::before,
html[data-theme] *::after {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              box-shadow 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  html,
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media screen and (max-width: 768px) {
  :root {
    --shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 12px 32px rgba(15, 23, 42, 0.16);
    --shadow-2xl: 0 16px 48px rgba(15, 23, 42, 0.2);
  }
}