/*
 * STEM Voodoo theme — pearl aqua palette with light (default) and dark modes.
 * Raw palette tokens are fixed; semantic --voodoo-* aliases swap per theme.
 */

:root,
[data-theme="light"] {
  color-scheme: light;

  /* Raw palettes */
  --color-pearl-aqua-50: #ecf8f5;
  --color-pearl-aqua-100: #d9f2ea;
  --color-pearl-aqua-200: #b3e5d6;
  --color-pearl-aqua-300: #8dd8c1;
  --color-pearl-aqua-400: #67cbad;
  --color-pearl-aqua-500: #41be98;
  --color-pearl-aqua-600: #34987a;
  --color-pearl-aqua-700: #27725b;
  --color-pearl-aqua-800: #1a4c3d;
  --color-pearl-aqua-900: #0d261e;
  --color-pearl-aqua-950: #091b15;

  --color-shadow-grey-50: #f3f1f2;
  --color-shadow-grey-100: #e7e4e5;
  --color-shadow-grey-200: #cfc9ca;
  --color-shadow-grey-300: #b7aeb0;
  --color-shadow-grey-400: #9f9396;
  --color-shadow-grey-500: #87787c;
  --color-shadow-grey-600: #6c6063;
  --color-shadow-grey-700: #51484a;
  --color-shadow-grey-800: #363031;
  --color-shadow-grey-900: #1b1819;
  --color-shadow-grey-950: #131111;

  --color-medium-slate-blue-50: #ece9fb;
  --color-medium-slate-blue-100: #d9d4f7;
  --color-medium-slate-blue-200: #b3a9ef;
  --color-medium-slate-blue-300: #8e7ee7;
  --color-medium-slate-blue-400: #6853df;
  --color-medium-slate-blue-500: #4228d7;
  --color-medium-slate-blue-600: #3520ac;
  --color-medium-slate-blue-700: #281881;
  --color-medium-slate-blue-800: #1a1056;
  --color-medium-slate-blue-900: #0d082b;
  --color-medium-slate-blue-950: #09061e;

  --color-burnt-peach-50: #fbede9;
  --color-burnt-peach-100: #f7dad4;
  --color-burnt-peach-200: #efb6a9;
  --color-burnt-peach-300: #e7917e;
  --color-burnt-peach-400: #df6c53;
  --color-burnt-peach-500: #d74828;
  --color-burnt-peach-600: #ac3920;
  --color-burnt-peach-700: #812b18;
  --color-burnt-peach-800: #561d10;
  --color-burnt-peach-900: #2b0e08;
  --color-burnt-peach-950: #1e0a06;

  --color-slate-indigo-50: #e9edfc;
  --color-slate-indigo-100: #d2dbf9;
  --color-slate-indigo-200: #a5b6f3;
  --color-slate-indigo-300: #7892ed;
  --color-slate-indigo-400: #4b6de7;
  --color-slate-indigo-500: #1f49e0;
  --color-slate-indigo-600: #183ab4;
  --color-slate-indigo-700: #122c87;
  --color-slate-indigo-800: #0c1d5a;
  --color-slate-indigo-900: #060f2d;
  --color-slate-indigo-950: #040a1f;

  /* Semantic aliases — primary (pearl aqua) */
  --voodoo-50: var(--color-pearl-aqua-50);
  --voodoo-100: var(--color-pearl-aqua-100);
  --voodoo-200: var(--color-pearl-aqua-200);
  --voodoo-300: var(--color-pearl-aqua-300);
  --voodoo-400: var(--color-pearl-aqua-400);
  --voodoo-500: var(--color-pearl-aqua-500);
  --voodoo-600: var(--color-pearl-aqua-600);
  --voodoo-700: var(--color-pearl-aqua-700);
  --voodoo-800: var(--color-pearl-aqua-800);
  --voodoo-900: var(--color-pearl-aqua-900);

  /* Semantic aliases — secondary (medium slate blue) */
  --voodoo-secondary-50: var(--color-medium-slate-blue-50);
  --voodoo-secondary-100: var(--color-medium-slate-blue-100);
  --voodoo-secondary-200: var(--color-medium-slate-blue-200);
  --voodoo-secondary-300: var(--color-medium-slate-blue-300);
  --voodoo-secondary-400: var(--color-medium-slate-blue-400);
  --voodoo-secondary-500: var(--color-medium-slate-blue-500);
  --voodoo-secondary-600: var(--color-medium-slate-blue-600);
  --voodoo-secondary-700: var(--color-medium-slate-blue-700);
  --voodoo-secondary-800: var(--color-medium-slate-blue-800);
  --voodoo-secondary-900: var(--color-medium-slate-blue-900);

  /* Semantic aliases — accent (burnt peach) */
  --voodoo-accent-50: var(--color-burnt-peach-50);
  --voodoo-accent-100: var(--color-burnt-peach-100);
  --voodoo-accent-200: var(--color-burnt-peach-200);
  --voodoo-accent-300: var(--color-burnt-peach-300);
  --voodoo-accent-400: var(--color-burnt-peach-400);
  --voodoo-accent-500: var(--color-burnt-peach-500);
  --voodoo-accent-600: var(--color-burnt-peach-600);
  --voodoo-accent-700: var(--color-burnt-peach-700);
  --voodoo-accent-800: var(--color-burnt-peach-800);
  --voodoo-accent-900: var(--color-burnt-peach-900);

  /* Semantic text & surfaces */
  --voodoo-text-primary: var(--color-shadow-grey-900);
  --voodoo-text-secondary: var(--color-shadow-grey-700);
  --voodoo-text-muted: var(--color-shadow-grey-500);
  --voodoo-text-tertiary: var(--color-shadow-grey-400);
  --voodoo-text-inverse: #ffffff;

  --voodoo-bg-primary: #ffffff;
  --voodoo-bg-secondary: var(--color-pearl-aqua-50);
  --voodoo-bg-accent: var(--color-burnt-peach-100);
  --voodoo-bg-overlay: rgba(19, 17, 17, 0.5);
  --voodoo-surface-glass: rgba(255, 255, 255, 0.9);
  --voodoo-border: var(--color-pearl-aqua-200);
}

[data-theme="dark"] {
  color-scheme: dark;

  --voodoo-50: var(--color-pearl-aqua-950);
  --voodoo-100: var(--color-pearl-aqua-900);
  --voodoo-200: var(--color-pearl-aqua-800);
  --voodoo-300: var(--color-pearl-aqua-700);
  --voodoo-400: var(--color-pearl-aqua-600);
  --voodoo-500: var(--color-pearl-aqua-500);
  --voodoo-600: var(--color-pearl-aqua-400);
  --voodoo-700: var(--color-pearl-aqua-300);
  --voodoo-800: var(--color-pearl-aqua-200);
  --voodoo-900: var(--color-pearl-aqua-100);

  --voodoo-secondary-50: var(--color-medium-slate-blue-950);
  --voodoo-secondary-100: var(--color-medium-slate-blue-900);
  --voodoo-secondary-200: var(--color-medium-slate-blue-800);
  --voodoo-secondary-300: var(--color-medium-slate-blue-700);
  --voodoo-secondary-400: var(--color-medium-slate-blue-600);
  --voodoo-secondary-500: var(--color-medium-slate-blue-500);
  --voodoo-secondary-600: var(--color-medium-slate-blue-400);
  --voodoo-secondary-700: var(--color-medium-slate-blue-300);
  --voodoo-secondary-800: var(--color-medium-slate-blue-200);
  --voodoo-secondary-900: var(--color-medium-slate-blue-100);

  --voodoo-accent-50: var(--color-burnt-peach-950);
  --voodoo-accent-100: var(--color-burnt-peach-900);
  --voodoo-accent-200: var(--color-burnt-peach-800);
  --voodoo-accent-300: var(--color-burnt-peach-700);
  --voodoo-accent-400: var(--color-burnt-peach-600);
  --voodoo-accent-500: var(--color-burnt-peach-500);
  --voodoo-accent-600: var(--color-burnt-peach-400);
  --voodoo-accent-700: var(--color-burnt-peach-300);
  --voodoo-accent-800: var(--color-burnt-peach-200);
  --voodoo-accent-900: var(--color-burnt-peach-100);

  --voodoo-text-primary: var(--color-shadow-grey-50);
  --voodoo-text-secondary: var(--color-shadow-grey-200);
  --voodoo-text-muted: var(--color-shadow-grey-400);
  --voodoo-text-tertiary: var(--color-shadow-grey-500);
  --voodoo-text-inverse: var(--color-shadow-grey-950);

  --voodoo-bg-primary: var(--color-shadow-grey-950);
  --voodoo-bg-secondary: var(--color-shadow-grey-900);
  --voodoo-bg-accent: var(--color-burnt-peach-900);
  --voodoo-bg-overlay: rgba(0, 0, 0, 0.65);
  --voodoo-surface-glass: rgba(27, 24, 25, 0.92);
  --voodoo-border: var(--color-shadow-grey-700);
}

/* Responsive image optimization */
.responsive-image {
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 640px) {
  .responsive-image {
    max-height: 200px;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .responsive-image {
    max-height: 300px;
  }
}

@media (min-width: 1025px) {
  .responsive-image {
    max-height: 400px;
  }
}

@media (max-width: 768px) {
  .carousel-image {
    height: 200px;
    object-fit: cover;
  }
}

@media (min-width: 769px) {
  .carousel-image {
    height: 384px;
    object-fit: cover;
  }
}

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

.gradient-bg {
  background: linear-gradient(135deg, var(--color-medium-slate-blue-700) 0%, var(--color-pearl-aqua-500) 50%, var(--color-slate-indigo-500) 100%);
}

.astronaut-left {
  position: absolute;
  bottom: 0;
  left: -50px;
  width: 400px;
  height: 600px;
  opacity: 0.3;
}

.astronaut-right {
  position: absolute;
  bottom: 0;
  right: -50px;
  width: 400px;
  height: 600px;
  opacity: 0.3;
}

.color-input {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.color-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.3);
}

.new-feature-banner {
  background: linear-gradient(90deg, var(--color-pearl-aqua-500) 0%, var(--color-slate-indigo-500) 100%);
}

.inline {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

.interview-player {
  width: 100%;
  border: none;
  background: #000;
  height: 220px;
}

@media (min-width: 640px) {
  .interview-player {
    height: 320px;
  }
}

@media (min-width: 1024px) {
  .interview-player {
    height: 45vh;
    min-height: 360px;
    max-height: 540px;
  }
}

@media (min-width: 1440px) {
  .interview-player {
    height: 50vh;
    min-height: 420px;
    max-height: 720px;
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid var(--voodoo-border);
  background: var(--voodoo-surface-glass);
  color: var(--voodoo-text-primary);
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--voodoo-50);
}

.theme-toggle .theme-icon-dark {
  display: none;
}

[data-theme="dark"] .theme-toggle .theme-icon-light {
  display: none;
}

[data-theme="dark"] .theme-toggle .theme-icon-dark {
  display: block;
}