/* Base Theme Variables */
:root {
  /* Primary Colors */
  --color-primary-50: #e3f2fd;
  --color-primary-100: #bbdefb;
  --color-primary-200: #90caf9;
  --color-primary-300: #64b5f6;
  --color-primary-400: #42a5f5;
  --color-primary-500: #2196f3;
  --color-primary-600: #1e88e5;
  --color-primary-700: #1976d2;
  --color-primary-800: #1565c0;
  --color-primary-900: #0d47a1;
  /* Neutral Colors */
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #eeeeee;
  --color-neutral-300: #e0e0e0;
  --color-neutral-400: #bdbdbd;
  --color-neutral-500: #9e9e9e;
  --color-neutral-600: #757575;
  --color-neutral-700: #616161;
  --color-neutral-800: #424242;
  --color-neutral-900: #212121;
  /* Accent Colors */
  --color-secondary: #ff4081;
  --color-success: #4caf50;
  --color-danger: #f44336;
  --color-warning: #ff9800;
  --color-info: #2196f3;
  /* Semantic Colors - Light Theme */
  --color-primary: var(--color-primary-500);
  --color-primary-dark: var(--color-primary-700);
  --color-primary-light: var(--color-primary-100);
  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: var(--color-neutral-50);
  --color-bg-tertiary: var(--color-neutral-100);
  --color-background: var(--color-neutral-50);
  /* Text Colors */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-inverse: #ffffff;
  /* Border Colors */
  --color-border: var(--color-neutral-200);
  --color-border-hover: var(--color-neutral-300);
  /* Component Colors */
  --color-button-background: var(--color-primary);
  --color-button-text: white;
  --color-input-background: white;
  --color-input-border: var(--color-neutral-300);
  /* Elevation Shadows */
  --shadow-low: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.12);
  --shadow-high: 0 8px 16px rgba(0, 0, 0, 0.14);
}
/* Dark Theme */
[data-theme="dark"] {
  /* Semantic Colors - Dark Theme */
  --color-background: var(--color-neutral-900);
  --color-bg-primary: var(--color-neutral-800);
  --color-bg-secondary: var(--color-neutral-900);
  --color-bg-tertiary: var(--color-neutral-700);
  /* Text Colors */
  --color-text-primary: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-tertiary: var(--color-neutral-500);
  /* Border Colors */
  --color-border: var(--color-neutral-700);
  --color-border-hover: var(--color-neutral-600);
  /* Component Colors */
  --color-button-background: var(--color-primary-600);
  --color-button-text: white;
  --color-input-background: var(--color-neutral-800);
  --color-input-border: var(--color-neutral-600);
  /* Elevation Shadows */
  --shadow-low: 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.24);
  --shadow-high: 0 8px 16px rgba(0, 0, 0, 0.28);
}
/* Theme Transitions */
.theme-transition {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.theme-transition-bg {
  transition: background-color 0.3s ease;
}
.theme-transition-color {
  transition: color 0.3s ease;
}
.theme-transition-border {
  transition: border-color 0.3s ease;
}
.theme-transition-shadow {
  transition: box-shadow 0.3s ease;
}
.theme-transition-all {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}
/* Print Mode Overrides */
@media print {
  :root {
    --color-background: white;
    --color-bg-primary: white;
    --color-bg-secondary: white;
    --color-text-primary: black;
    --color-text-secondary: var(--color-neutral-800);
    --color-border: var(--color-neutral-300);
    --shadow-low: none;
    --shadow-medium: none;
    --shadow-high: none;
  }
}