:root {
  /* Core Color Palette - Soft Teal Theme */
  --color-primary: #2A9D8F;
  --color-primary-light: #4FB3A9;
  --color-primary-dark: #21867A;
  --color-secondary: #E9C46A;
  --color-secondary-light: #F4D88A;
  --color-secondary-dark: #D4B14D;
  --color-tertiary: #E76F51;
  --color-tertiary-light: #F3917A;
  --color-tertiary-dark: #D15941;
  --color-hover: #F4A261;
  
  /* System Colors */
  --color-success: #43AA8B;
  --color-warning: #F9C74F;
  --color-error: #F94144;
  --color-info: #577590;
  
  /* Light Theme Colors */
  --color-background-light: #F8F9FA;
  --color-surface-light: #FFFFFF;
  --color-text-primary-light: #2D3748;
  --color-text-secondary-light: #4A5568;
  --color-border-light: rgba(203, 213, 224, 0.8);
  --rgb-surface-light: 255, 255, 255;
  
  /* Dark Theme Colors */
  --color-background-dark: #1A202C;
  --color-surface-dark: #2D3748;
  --color-text-primary-dark: #F7FAFC;
  --color-text-secondary-dark: #CBD5E0;
  --color-border-dark: rgba(74, 85, 104, 0.8);
  --rgb-surface-dark: 45, 55, 72;
  
  /* Shadow System */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.04);
  
  /* Text Shadow */
  --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Defaults for Light Theme */
  --color-background: var(--color-background-light);
  --color-surface: var(--color-surface-light);
  --color-text-primary: var(--color-text-primary-light);
  --color-text-secondary: var(--color-text-secondary-light);
  --color-border: var(--color-border-light);
  --rgb-surface: var(--rgb-surface-light);
}

[data-theme="dark"] {
  --color-background: var(--color-background-dark);
  --color-surface: var(--color-surface-dark);
  --color-text-primary: var(--color-text-primary-dark);
  --color-text-secondary: var(--color-text-secondary-dark);
  --color-border: var(--color-border-dark);
  --rgb-surface: var(--rgb-surface-dark);
}

/* Updated Gradient for buttons and accents */
:root {
  --gradient-border: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-secondary) 50%,
    var(--color-tertiary) 100%
  );
  
  --gradient-border-hover: linear-gradient(
    135deg,
    var(--color-primary-light) 0%,
    var(--color-secondary-light) 50%,
    var(--color-tertiary-light) 100%
  );
}

:root[data-theme="light"] .upload-area {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

:root[data-theme="light"] .upload-area:hover {
  border-color: var(--color-primary);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 12px var(--color-shadow-subtle);
}

:root[data-theme="dark"] .upload-area {
  background: var(--container-bg);
  border-color: var(--color-border);
}

:root[data-theme="dark"] .upload-area:hover {
  border-color: var(--color-primary);
  background: rgba(60, 60, 60, 0.95);
}

:root[data-theme="dark"] .icon-button,
:root[data-theme="dark"] .prompt-selector,
:root[data-theme="dark"] .radio-group {
  background: var(--container-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

:root[data-theme="dark"] .icon-button:hover,
:root[data-theme="dark"] .prompt-selector:hover,
:root[data-theme="dark"] .radio-group:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--color-shadow-primary);
  border-color: var(--color-primary);
  background: rgba(60, 60, 60, 0.95);
}

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

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

.theme-button {
  background: var(--container-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);
  transition: var(--transition-standard);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.theme-button:hover {
  transform: scale(1.1);
  border-color: var(--color-primary);
  background: rgba(60, 60, 60, 0.95);
}

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

:root[data-theme="light"] body {
  background-color: #ffffff;
  background-image: none;
}

:root[data-theme="dark"] body {
  background-color: #000000;
  background-image: none;
}

.animated-gradient {
  animation: gradientRotate 4s linear infinite;
}