:root {
  /* Light mode colors - these will only apply when data-theme="light" is set */
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-secondary: #06b6d4;
  --color-secondary-light: #22d3ee;
  --color-secondary-dark: #0891b2;
  --color-tertiary: #8b5cf6;
  --color-tertiary-light: #a78bfa;
  --color-tertiary-dark: #7c3aed;
  --color-hover: var(--color-primary-light);
  --color-active: var(--color-primary-dark);
  --color-focus: rgba(99, 102, 241, 0.4);
  
  --color-background: #f0f0f0;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-hover: #e0e0e0;
  
  --color-text-primary: #111111;
  --color-text-secondary: #333333;
  --color-text-tertiary: #555555;
  --color-text-disabled: #9ca3af;
  
  --color-border: #bbbbbb;
  --color-divider: #bbbbbb;
  
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  --color-shadow-primary: rgba(0, 0, 0, 0.05);
  --color-shadow-secondary: rgba(0, 0, 0, 0.1);
  
  --container-bg: rgba(255, 255, 255, 0.95);
  --icon-filter: none;
  
  /* RGB values for opacity adjustments */
  --rgb-surface: 249, 250, 251;
  --rgb-primary: 99, 102, 241;
  --rgb-secondary: 6, 182, 212;
  --rgb-tertiary: 139, 92, 246;
  
  /* Gradient variables */
  --gradient-border: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-tertiary),
    var(--color-secondary),
    var(--color-primary)
  );
  
  --gradient-background: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    var(--color-tertiary-light) 100%
  );
}

/* Set dark theme as default */
html {
  data-theme: dark;
}

:root[data-theme="dark"] {
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-secondary: #06b6d4;
  --color-secondary-light: #22d3ee;
  --color-secondary-dark: #0891b2;
  --color-tertiary: #8b5cf6;
  --color-tertiary-light: #a78bfa;
  --color-tertiary-dark: #7c3aed;
  --color-hover: var(--color-primary-light);
  --color-active: var(--color-primary-dark);
  --color-focus: rgba(99, 102, 241, 0.4);
  
  --color-background: #121212;
  --color-surface: #1e1e1e;
  --color-surface-elevated: #252525;
  --color-surface-hover: #2a2a2a;
  
  --color-text-primary: rgba(255, 255, 255, 0.9);
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.38);
  
  --color-border: #333333;
  --color-divider: rgba(255, 255, 255, 0.12);
  
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;
  
  --color-shadow-primary: rgba(0, 0, 0, 0.5);
  --color-shadow-secondary: rgba(0, 0, 0, 0.3);
  
  --container-bg: rgba(30, 30, 30, 0.95);
  --icon-filter: brightness(0.9) invert(1);
  
  /* RGB values for opacity adjustments */
  --rgb-surface: 30, 30, 30;
  --rgb-primary: 99, 102, 241;
  --rgb-secondary: 6, 182, 212;
  --rgb-tertiary: 139, 92, 246;
  
  /* Gradient variables */
  --gradient-border: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary),
    var(--color-tertiary),
    var(--color-secondary),
    var(--color-primary)
  );
  
  --gradient-background: linear-gradient(
    135deg,
    var(--color-primary-dark) 0%,
    var(--color-tertiary-dark) 100%
  );
}

:root[data-theme="light"] .upload-area {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-md);
}

:root[data-theme="light"] .upload-area:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

:root[data-theme="dark"] .upload-area {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--border-radius-md);
}

:root[data-theme="dark"] .upload-area:hover {
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

:root[data-theme="dark"] .control-selector,
:root[data-theme="dark"] .prompt-selector,
:root[data-theme="dark"] .radio-group {
  background-image: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  border-radius: var(--border-radius-md);
  transition: all var(--transition-standard);
}

:root[data-theme="dark"] .icon-button:hover,
:root[data-theme="dark"] .prompt-selector:hover,
:root[data-theme="dark"] .radio-group:hover,
:root[data-theme="dark"] .control-selector:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
  background-image: none !important;
}

:root[data-theme="dark"] .streaming-avatar {
  filter: var(--icon-filter);
}

.theme-toggle {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: 1000;
}

.theme-button {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: all var(--transition-standard);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: var(--shadow-sm);
}

.theme-button:hover {
  transform: scale(1.1);
  border-color: var(--color-primary);
  background: var(--color-surface-hover);
  box-shadow: var(--shadow-md);
}

.theme-button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:root[data-theme="dark"] .icon-button:focus-visible,
:root[data-theme="dark"] .prompt-selector:focus-visible,
:root[data-theme="dark"] .control-selector:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:root[data-theme="light"] body {
  background-color: var(--color-background);
  background-image: none;
  min-height: auto !important;
}

:root[data-theme="dark"] body {
  background-color: var(--color-background);
  background-image: none;
  min-height: auto !important;
}

.animated-gradient {
  background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
              var(--gradient-border) border-box;
  border: 2px solid transparent;
  background-size: 200% 200%;
  animation: gradientRotate 4s linear infinite;
  border-radius: var(--border-radius-md);
  transition: transform var(--transition-standard), box-shadow var(--transition-standard);
}

.animated-gradient:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}