/*
 * STEM Voodoo theme — bold purple & orange with teal/blue/black accents.
 * 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-purple-50: #f0ecfb;
  --color-purple-100: #e1d9f7;
  --color-purple-200: #c3b3ef;
  --color-purple-300: #a58de7;
  --color-purple-400: #8767df;
  --color-purple-500: #7765e3;
  --color-purple-600: #6252b8;
  --color-purple-700: #4d3f8d;
  --color-purple-800: #382c62;
  --color-purple-900: #231937;
  --color-purple-950: #190f25;

  --color-orange-50: #fdf4f1;
  --color-orange-100: #fbe8e2;
  --color-orange-200: #f7d1c5;
  --color-orange-300: #f3baa8;
  --color-orange-400: #efa38b;
  --color-orange-500: #de6449;
  --color-orange-600: #b8513b;
  --color-orange-700: #923e2d;
  --color-orange-800: #6c2b1f;
  --color-orange-900: #461811;
  --color-orange-950: #2e0f0a;

  --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: #3b60e4;
  --color-slate-indigo-600: #2f4eb5;
  --color-slate-indigo-700: #233c86;
  --color-slate-indigo-800: #172a57;
  --color-slate-indigo-900: #0b1828;
  --color-slate-indigo-950: #050c1a;

  /* Navy & Cyan — scoped override palette for Job Search pages (see .theme-jobs) */
  --color-navy-50: #eef3fb;
  --color-navy-100: #dce7f6;
  --color-navy-200: #b9cfee;
  --color-navy-300: #91b3e3;
  --color-navy-400: #6796d8;
  --color-navy-500: #3f76c2;
  --color-navy-600: #2c5a9e;
  --color-navy-700: #1f4278;
  --color-navy-800: #142c52;
  --color-navy-900: #0b1a32;
  --color-navy-950: #060f1d;

  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;

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

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

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

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

  /* Semantic aliases — quaternary accent (BLACK) for text and shadows */
  --voodoo-black: #231f20;
  --voodoo-black-80: rgba(35, 31, 32, 0.8);
  --voodoo-black-50: rgba(35, 31, 32, 0.5);

  /* 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-purple-50);
  --voodoo-bg-accent: var(--color-orange-100);
  --voodoo-bg-overlay: rgba(35, 25, 55, 0.5);
  --voodoo-surface-glass: rgba(255, 255, 255, 0.9);
  --voodoo-border: var(--color-purple-200);
}

/*
 * Cyan theme override for site-wide use (navy & cyan).
 * Applied to all pages except landing page.
 * Swaps the shared --voodoo-* aliases (used site-wide via inline styles
 * and Tailwind's voodoo/voodoo-accent utility classes) from purple/orange
 * to navy/cyan.
 */
.theme-cyan,
.theme-jobs {
  --voodoo-50: var(--color-navy-50);
  --voodoo-100: var(--color-navy-100);
  --voodoo-200: var(--color-navy-200);
  --voodoo-300: var(--color-navy-300);
  --voodoo-400: var(--color-navy-400);
  --voodoo-500: var(--color-navy-500);
  --voodoo-600: var(--color-navy-600);
  --voodoo-700: var(--color-navy-700);
  --voodoo-800: var(--color-navy-800);
  --voodoo-900: var(--color-navy-900);

  --voodoo-secondary-50: var(--color-cyan-50);
  --voodoo-secondary-100: var(--color-cyan-100);
  --voodoo-secondary-200: var(--color-cyan-200);
  --voodoo-secondary-300: var(--color-cyan-300);
  --voodoo-secondary-400: var(--color-cyan-400);
  --voodoo-secondary-500: var(--color-cyan-500);
  --voodoo-secondary-600: var(--color-cyan-600);
  --voodoo-secondary-700: var(--color-cyan-700);
  --voodoo-secondary-800: var(--color-cyan-800);
  --voodoo-secondary-900: var(--color-cyan-900);

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

  --voodoo-tertiary-50: var(--color-navy-50);
  --voodoo-tertiary-100: var(--color-navy-100);
  --voodoo-tertiary-200: var(--color-navy-200);
  --voodoo-tertiary-300: var(--color-navy-300);
  --voodoo-tertiary-400: var(--color-navy-400);
  --voodoo-tertiary-500: var(--color-navy-500);
  --voodoo-tertiary-600: var(--color-navy-600);
  --voodoo-tertiary-700: var(--color-navy-700);
  --voodoo-tertiary-800: var(--color-navy-800);
  --voodoo-tertiary-900: var(--color-navy-900);

  --voodoo-bg-secondary: var(--color-navy-50);
  --voodoo-bg-accent: var(--color-cyan-100);
  --voodoo-border: var(--color-navy-200);
}

/* Retint the shared ambient particles to navy/cyan on theme-cyan / Job Search pages */
.theme-cyan .particle-purple,
.theme-jobs .particle-purple {
  background-color: var(--color-navy-700);
  box-shadow: 0 0 6px rgba(31, 66, 120, 0.8);
}

.theme-cyan .particle-orange,
.theme-jobs .particle-orange {
  background-color: var(--color-cyan-600);
  box-shadow: 0 0 6px rgba(8, 145, 178, 0.8);
}

.theme-cyan .particle-aqua,
.theme-jobs .particle-aqua {
  background-color: var(--color-cyan-400);
  box-shadow: 0 0 6px rgba(34, 211, 238, 0.8);
}

.theme-cyan .particle-indigo,
.theme-jobs .particle-indigo {
  background-color: var(--color-navy-500);
  box-shadow: 0 0 6px rgba(63, 118, 194, 0.8);
}

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

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

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

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

  /* Semantic aliases — tertiary accent (blue) — dark mode */
  --voodoo-tertiary-50: var(--color-slate-indigo-950);
  --voodoo-tertiary-100: var(--color-slate-indigo-900);
  --voodoo-tertiary-200: var(--color-slate-indigo-800);
  --voodoo-tertiary-300: var(--color-slate-indigo-700);
  --voodoo-tertiary-400: var(--color-slate-indigo-600);
  --voodoo-tertiary-500: var(--color-slate-indigo-500);
  --voodoo-tertiary-600: var(--color-slate-indigo-400);
  --voodoo-tertiary-700: var(--color-slate-indigo-300);
  --voodoo-tertiary-800: var(--color-slate-indigo-200);
  --voodoo-tertiary-900: var(--color-slate-indigo-100);

  --voodoo-text-primary: var(--color-purple-300);
  --voodoo-text-secondary: var(--color-orange-300);
  --voodoo-text-muted: var(--color-pearl-aqua-400);
  --voodoo-text-tertiary: var(--color-slate-indigo-400);
  --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-orange-900);
  --voodoo-bg-overlay: rgba(35, 25, 55, 0.65);
  --voodoo-surface-glass: rgba(27, 24, 25, 0.92);
  --voodoo-border: var(--color-purple-700);
}

/* Cyan theme override (dark mode) */
[data-theme="dark"] .theme-cyan,
[data-theme="dark"] .theme-jobs {
  --voodoo-50: var(--color-navy-950);
  --voodoo-100: var(--color-navy-900);
  --voodoo-200: var(--color-navy-800);
  --voodoo-300: var(--color-navy-700);
  --voodoo-400: var(--color-navy-600);
  --voodoo-500: var(--color-navy-500);
  --voodoo-600: var(--color-navy-400);
  --voodoo-700: var(--color-navy-300);
  --voodoo-800: var(--color-navy-200);
  --voodoo-900: var(--color-navy-100);

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

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

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

  --voodoo-bg-secondary: var(--color-navy-900);
  --voodoo-bg-accent: var(--color-cyan-900);
  --voodoo-border: var(--color-navy-700);

  --voodoo-text-primary: var(--color-navy-100);
  --voodoo-text-secondary: var(--color-cyan-300);
  --voodoo-text-muted: var(--color-cyan-400);
  --voodoo-text-tertiary: var(--color-navy-400);
}

/* 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-purple-700) 0%, var(--color-orange-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-purple-500) 0%, var(--color-orange-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;
  }
}