/**
 * BabySNEK Webapp 2.0 - Themes
 * Dark: Industrial Blues with pink accent pops
 * Light: Warm Pinks with blue accent pops
 * Uses brand palette from babysnek-variables.css
 */

/* ========================================
   DARK MODE (Default) - Blues + Pink Accents
   Deep industrial blue base, neon cyan/blue primary,
   pink accent pops for highlights and CTAs
   ======================================== */

html.dark {
  /* Core surfaces — deep blue base */
  --bg-body: #050A0F;
  --bg-body-gradient: linear-gradient(180deg, #0B1117 0%, #050A0F 100%);
  --bg-nav: rgba(11, 17, 23, 0.7);
  --bg-footer: rgba(11, 17, 23, 0.7);

  /* Text hierarchy */
  --text-heading: #f8fbff;
  --text-body: #dbe7f3;
  --text-secondary: #b3c1d6;
  --text-muted: #8ea0ba;
  --text-label: #8ea0ba;

  /* Accent colors — blue primary, pink secondary */
  --accent-primary: var(--snek-neon);     /* #04CFFF — the star */
  --accent-secondary: var(--snek-pink);   /* #FC8ECD — accent pop */
  --accent-tertiary: #7FB8E0;             /* dark-blue-1 — subtle blue */

  /* Link colors */
  --link-color: var(--snek-neon);
  --link-hover: var(--snek-pink);

  /* Glass morphism — blue-tinted */
  --glass-bg: rgba(11, 17, 23, 0.78);
  --glass-border: rgba(127, 184, 224, 0.16);  /* blue tint */
  --glass-bg-hover: rgba(4, 207, 255, 0.08);

  /* Card surfaces — subtle blue glow */
  --card-bg: rgba(127, 184, 224, 0.05);
  --card-border: rgba(127, 184, 224, 0.16);
  --card-border-hover: var(--snek-neon);

  /* Code blocks */
  --code-bg: rgba(0, 0, 0, 0.4);
  --code-text: #ffffff;

  /* Borders — blue-tinted */
  --border-color: rgba(127, 184, 224, 0.16);
  --border-color-strong: rgba(127, 184, 224, 0.28);

  /* Shadows - cool blue */
  --shadow-color: rgba(4, 40, 60, 0.4);
  --focus-ring: var(--snek-neon);

  /* Inputs */
  --input-bg: rgba(0, 0, 0, 0.5);
  --input-border: rgba(127, 184, 224, 0.22);
  --input-text: #ffffff;

  /* Buttons — neon cyan primary */
  --btn-primary-bg: var(--snek-neon);
  --btn-primary-hover: #22d7ff;
  --btn-primary-text: #06131a;
  --btn-primary-shadow: rgba(4, 207, 255, 0.28);
  --btn-secondary-bg: rgba(11, 17, 23, 0.6);
  --btn-secondary-hover: rgba(17, 27, 38, 0.9);
  --btn-secondary-text: #e3edf8;
  --btn-secondary-border: rgba(127, 184, 224, 0.32);
  --btn-outline-text: var(--snek-neon);
  --btn-outline-border: var(--snek-neon);
  --btn-outline-hover-bg: var(--snek-neon);
  --btn-outline-hover-text: #06131a;
  --btn-ghost-text: var(--snek-neon);
  --btn-ghost-hover-bg: rgba(4, 207, 255, 0.12);
  --btn-pink-bg: #fc8ecd;
  --btn-pink-hover: #ff9fd7;
  --btn-pink-text: #1a0f17;
  --btn-pink-shadow: rgba(252, 142, 205, 0.35);
  --btn-blue-bg: #04cfff;
  --btn-blue-hover: #22d7ff;
  --btn-blue-text: #06131a;
  --btn-blue-shadow: rgba(4, 207, 255, 0.32);
  --btn-radial-pink-from: #ffd5ee;
  --btn-radial-pink-to: #fc8ecd;
  --btn-radial-pink-text: #1a0f17;
  --btn-radial-pink-shadow: rgba(252, 142, 205, 0.4);
  --btn-radial-blue-from: #b9ecff;
  --btn-radial-blue-to: #04cfff;
  --btn-radial-blue-text: #06131a;
  --btn-radial-blue-shadow: rgba(4, 207, 255, 0.35);

  /* Scrollbar */
  --scrollbar-thumb: #1e293b;

  /* Status */
  --status-live: var(--snek-neon);

  /* Badges — pink accent pops */
  --badge-pink-bg: rgba(252, 142, 205, 0.22);
  --badge-pink-text: var(--snek-pink);
  --badge-blue-bg: rgba(4, 207, 255, 0.2);
  --badge-blue-text: var(--snek-neon);
  --badge-success-bg: rgba(16, 185, 129, 0.15);
  --badge-success-text: #10b981;

  /* Alerts */
  --alert-warning-bg: rgba(245, 158, 11, 0.16);
  --alert-warning-border: rgba(245, 158, 11, 0.45);
  --alert-warning-text: #fbbf24;

  /* Details/Summary (FAQ) — pink accent */
  --summary-bg: rgba(252, 142, 205, 0.08);
  --summary-hover-bg: rgba(252, 142, 205, 0.16);

  /* Roadmap phases */
  --phase-complete-bg: var(--badge-success-bg);
  --phase-complete-text: var(--badge-success-text);
  --phase-current-bg: var(--badge-pink-bg);
  --phase-current-text: var(--badge-pink-text);
  --phase-upcoming-bg: rgba(127, 184, 224, 0.05);
  --phase-upcoming-text: var(--text-muted);

  /* Brand palette aliases for dark mode */
  --brand-primary: var(--snek-neon);
  --brand-accent: var(--snek-pink);
  --brand-glow: rgba(4, 207, 255, 0.15);
  --brand-glow-accent: rgba(252, 142, 205, 0.15);
  --brand-surface-tint: rgba(127, 184, 224, 0.04);

  /* Aurora glow */
  --aurora-1: rgba(4, 207, 255, 0.18);
  --aurora-2: rgba(252, 142, 205, 0.16);
  --aurora-3: rgba(127, 184, 224, 0.14);
  --aurora-opacity: 0.55;
  --aurora-blur: 64px;

  /* Nav active indicator */
  --nav-active: var(--snek-neon);
  --nav-active-glow: rgba(4, 207, 255, 0.3);
}

html.dark body {
  background: var(--bg-body-gradient);
  color: var(--text-body);
}

html.dark h1, html.dark h2, html.dark h3,
html.dark h4, html.dark h5, html.dark h6 {
  color: var(--text-heading);
}

html.dark a { color: var(--link-color); }
html.dark a:hover { color: var(--link-hover); }

html.dark ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }

html.dark code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 0.2em 0.4em;
  border-radius: 6px;
}

html.dark pre {
  background: var(--code-bg);
  border: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: 12px;
}

/* ========================================
   LIGHT MODE - Warm Pinks + Blue Accents
   Soft pink-tinted surfaces, pink primary,
   blue accent pops for contrast and links
   ======================================== */

html.light {
  /* Core surfaces — warm pink-tinted whites */
  --bg-body: #FEFBFD;
  --bg-body-gradient: linear-gradient(180deg, #ffffff 0%, #FDF5FA 100%);
  --bg-nav: rgba(255, 253, 254, 0.85);
  --bg-footer: rgba(254, 251, 253, 0.9);

  /* Text hierarchy */
  --text-heading: #25141f;     /* warm dark with pink undertone */
  --text-body: #2f1f2a;
  --text-secondary: #5a3f4f;
  --text-muted: #705564;
  --text-label: #705564;

  /* Accent colors — pink primary, blue secondary */
  --accent-primary: #E83F8F;    /* dark-pink-2 — vibrant pink */
  --accent-secondary: #5798C6;  /* dark-blue-2 — cool blue */
  --accent-tertiary: #FFC2E8;   /* primary-pink — soft pink */

  /* Link colors — blue for contrast on pink surfaces */
  --link-color: #2b6ea6;
  --link-hover: #E83F8F;

  /* Glass morphism — pink-tinted */
  --glass-bg: rgba(255, 230, 247, 0.5);         /* light-pink-1 tint */
  --glass-border: rgba(255, 194, 232, 0.5);      /* primary-pink border */
  --glass-bg-hover: rgba(255, 217, 242, 0.65);     /* light-pink-2 */

  /* Card surfaces — pale pink */
  --card-bg: rgba(255, 230, 247, 0.45);
  --card-border: rgba(255, 194, 232, 0.5);
  --card-border-hover: #E83F8F;

  /* Code blocks */
  --code-bg: #FDF5FA;
  --code-text: #2D1A26;

  /* Borders — pink-tinted */
  --border-color: rgba(255, 194, 232, 0.5);
  --border-color-strong: rgba(255, 194, 232, 0.7);

  /* Shadows - warm pink */
  --shadow-color: rgba(232, 63, 143, 0.12);
  --focus-ring: #2b6ea6;

  /* Inputs — clean with pink focus */
  --input-bg: #ffffff;
  --input-border: rgba(232, 63, 143, 0.35);
  --input-text: #25141f;

  /* Buttons — pink primary */
  --btn-primary-bg: #E83F8F;
  --btn-primary-hover: #d73780;
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: rgba(232, 63, 143, 0.22);
  --btn-secondary-bg: rgba(255, 255, 255, 0.85);
  --btn-secondary-hover: rgba(255, 255, 255, 1);
  --btn-secondary-text: #2f1f2a;
  --btn-secondary-border: rgba(232, 63, 143, 0.45);
  --btn-outline-text: #2b6ea6;
  --btn-outline-border: #2b6ea6;
  --btn-outline-hover-bg: #2b6ea6;
  --btn-outline-hover-text: #ffffff;
  --btn-ghost-text: #2b6ea6;
  --btn-ghost-hover-bg: rgba(43, 110, 166, 0.12);
  --btn-pink-bg: #E83F8F;
  --btn-pink-hover: #d73780;
  --btn-pink-text: #ffffff;
  --btn-pink-shadow: rgba(232, 63, 143, 0.25);
  --btn-blue-bg: #5798C6;
  --btn-blue-hover: #4a87b5;
  --btn-blue-text: #ffffff;
  --btn-blue-shadow: rgba(87, 152, 198, 0.25);
  --btn-radial-pink-from: #ffd6ee;
  --btn-radial-pink-to: #E83F8F;
  --btn-radial-pink-text: #1a0f17;
  --btn-radial-pink-shadow: rgba(232, 63, 143, 0.3);
  --btn-radial-blue-from: #b3daf2;
  --btn-radial-blue-to: #5798C6;
  --btn-radial-blue-text: #06131a;
  --btn-radial-blue-shadow: rgba(87, 152, 198, 0.3);

  /* Scrollbar */
  --scrollbar-thumb: #FFD9F2;

  /* Status */
  --status-live: #E83F8F;

  /* Badges — blue accent pops */
  --badge-pink-bg: rgba(232, 63, 143, 0.16);
  --badge-pink-text: #E83F8F;
  --badge-blue-bg: rgba(87, 152, 198, 0.1);
  --badge-blue-text: #5798C6;
  --badge-success-bg: rgba(16, 185, 129, 0.1);
  --badge-success-text: #059669;

  /* Alerts */
  --alert-warning-bg: rgba(245, 158, 11, 0.08);
  --alert-warning-border: rgba(245, 158, 11, 0.4);
  --alert-warning-text: #d97706;

  /* Details/Summary (FAQ) — pink-tinted */
  --summary-bg: rgba(255, 194, 232, 0.1);
  --summary-hover-bg: rgba(255, 194, 232, 0.2);

  /* Roadmap phases */
  --phase-complete-bg: var(--badge-success-bg);
  --phase-complete-text: var(--badge-success-text);
  --phase-current-bg: var(--badge-pink-bg);
  --phase-current-text: var(--badge-pink-text);
  --phase-upcoming-bg: rgba(255, 194, 232, 0.08);
  --phase-upcoming-text: var(--text-muted);

  /* Brand palette aliases for light mode */
  --brand-primary: #E83F8F;
  --brand-accent: #5798C6;
  --brand-glow: rgba(255, 92, 166, 0.12);
  --brand-glow-accent: rgba(87, 152, 198, 0.12);
  --brand-surface-tint: rgba(255, 230, 247, 0.3);

  /* Aurora glow */
  --aurora-1: rgba(255, 92, 166, 0.18);
  --aurora-2: rgba(87, 152, 198, 0.18);
  --aurora-3: rgba(255, 194, 232, 0.22);
  --aurora-opacity: 0.45;
  --aurora-blur: 72px;

  /* Nav active indicator — pink in light mode */
  --nav-active: #E83F8F;
  --nav-active-glow: rgba(255, 92, 166, 0.3);

  /* Override neon/pink for light-specific contrast */
  --snek-neon: #5798C6;     /* blue in light mode */
  --snek-pink: #E83F8F;     /* vivid pink in light mode */
}

html.light body {
  background: var(--bg-body-gradient);
  color: var(--text-body);
}

html.light h1, html.light h2, html.light h3,
html.light h4, html.light h5, html.light h6 {
  color: var(--text-heading);
}

html.light a { color: var(--link-color); }
html.light a:hover { color: var(--link-hover); }

html.light :focus-visible {
  outline-color: var(--focus-ring);
  box-shadow: 0 0 0 3px rgba(43, 110, 166, 0.2);
}

html.light ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); }

html.light code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 0.2em 0.4em;
  border-radius: 6px;
}

html.light pre {
  background: var(--code-bg);
  border: 1px solid var(--border-color);
  padding: 1rem;
  border-radius: 12px;
}

/* ========================================
   HIGH CONTRAST OVERRIDES
   ======================================== */

html.high-contrast.dark {
  --bg-body: #000000;
  --bg-body-gradient: #000000;
  --bg-nav: rgba(0, 0, 0, 0.95);
  --bg-footer: rgba(0, 0, 0, 0.95);
  --text-heading: #ffffff;
  --text-body: #ffffff;
  --text-secondary: #f5f5f5;
  --text-muted: #e5e5e5;
  --accent-primary: #00e5ff;
  --accent-secondary: #ff4fa0;
  --link-color: #00e5ff;
  --link-hover: #ff4fa0;
  --glass-bg: rgba(0, 0, 0, 0.9);
  --glass-border: rgba(255, 255, 255, 0.6);
  --card-bg: rgba(0, 0, 0, 0.9);
  --card-border: rgba(255, 255, 255, 0.6);
  --card-border-hover: #00e5ff;
  --border-color: rgba(255, 255, 255, 0.6);
  --border-color-strong: rgba(255, 255, 255, 0.8);
  --input-bg: #000000;
  --input-border: rgba(255, 255, 255, 0.8);
  --input-text: #ffffff;
  --btn-primary-bg: #00e5ff;
  --btn-primary-text: #000000;
  --btn-secondary-border: rgba(255, 255, 255, 0.8);
  --btn-pink-bg: #ff4fa0;
  --btn-pink-hover: #ff6fb2;
  --btn-pink-text: #000000;
  --btn-blue-bg: #00e5ff;
  --btn-blue-hover: #19efff;
  --btn-blue-text: #000000;
  --btn-radial-pink-from: #ff8fc4;
  --btn-radial-pink-to: #ff4fa0;
  --btn-radial-pink-text: #000000;
  --btn-radial-blue-from: #7df2ff;
  --btn-radial-blue-to: #00e5ff;
  --btn-radial-blue-text: #000000;
  --shadow-color: rgba(0, 0, 0, 0.6);
  --aurora-opacity: 0;
  --aurora-blur: 0px;
}

html.high-contrast.light {
  --bg-body: #ffffff;
  --bg-body-gradient: #ffffff;
  --bg-nav: rgba(255, 255, 255, 0.95);
  --bg-footer: rgba(255, 255, 255, 0.95);
  --text-heading: #000000;
  --text-body: #000000;
  --text-secondary: #111111;
  --text-muted: #222222;
  --accent-primary: #0057ff;
  --accent-secondary: #ff1f8f;
  --link-color: #0057ff;
  --link-hover: #ff1f8f;
  --glass-bg: rgba(255, 255, 255, 0.96);
  --glass-border: rgba(0, 0, 0, 0.5);
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-border: rgba(0, 0, 0, 0.5);
  --card-border-hover: #0057ff;
  --border-color: rgba(0, 0, 0, 0.5);
  --border-color-strong: rgba(0, 0, 0, 0.7);
  --input-bg: #ffffff;
  --input-border: rgba(0, 0, 0, 0.7);
  --input-text: #000000;
  --btn-primary-bg: #0057ff;
  --btn-primary-text: #ffffff;
  --btn-secondary-border: rgba(0, 0, 0, 0.7);
  --btn-pink-bg: #ff1f8f;
  --btn-pink-hover: #e0197d;
  --btn-pink-text: #ffffff;
  --btn-blue-bg: #0057ff;
  --btn-blue-hover: #0047d1;
  --btn-blue-text: #ffffff;
  --btn-radial-pink-from: #ff5bb0;
  --btn-radial-pink-to: #ff1f8f;
  --btn-radial-pink-text: #ffffff;
  --btn-radial-blue-from: #4d7bff;
  --btn-radial-blue-to: #0057ff;
  --btn-radial-blue-text: #ffffff;
  --shadow-color: rgba(0, 0, 0, 0.2);
  --aurora-opacity: 0;
  --aurora-blur: 0px;
}

/* ========================================
   COMPONENT THEME OVERRIDES
   ======================================== */

/* Glass */
.glass {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

/* Navigation */
.nav-container {
  background: var(--bg-nav);
  border-bottom-color: var(--border-color);
}

/* Footer */
.footer-container {
  background: var(--bg-footer);
  border-top-color: var(--border-color);
}

/* Cards */
.card {
  background: var(--card-bg);
  border-color: var(--card-border);
}

.card:hover {
  border-color: var(--card-border-hover);
  box-shadow: 0 20px 40px var(--shadow-color);
}

/* Inputs */
.input, .textarea, .select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-text);
}

.input:focus, .textarea:focus, .select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 15px var(--brand-glow);
}

/* Navigation links */
.nav-link {
  color: var(--text-muted);
}

.nav-link:hover {
  color: var(--nav-active);
}

.nav-link.active {
  color: var(--nav-active) !important;
  position: relative;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--nav-active);
  border-radius: 10px;
}

/* Buttons - theme-aware */
.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-color: var(--btn-primary-border, transparent);
  box-shadow: 0 10px 24px var(--btn-primary-shadow, var(--shadow-color));
}

.btn-primary:hover {
  background: var(--btn-primary-hover, var(--btn-primary-bg));
  transform: translateY(-1px);
  box-shadow: 0 12px 30px var(--btn-primary-shadow, var(--shadow-color));
}

/* Stat values */
.stat-value { color: var(--text-heading); }
.stat-label { color: var(--text-muted); }
.stat-item-value { color: var(--brand-primary); }
.stat-item-label { color: var(--text-muted); }

/* Card content text */
.card-content { color: var(--text-secondary); }

/* Pillar descriptions */
.pillar-description { color: var(--text-muted); }

/* Text gradient — adapts per theme */
html.dark .text-gradient {
  background: linear-gradient(135deg, var(--snek-neon) 0%, var(--snek-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.light .text-gradient {
  background: linear-gradient(135deg, #E83F8F 0%, #5798C6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   THEME TOGGLE BUTTON
   ======================================== */

.theme-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  padding: 0;
}

html.dark .theme-toggle {
  background: rgba(127, 184, 224, 0.15);
}

html.light .theme-toggle {
  background: rgba(255, 194, 232, 0.4);
}

.theme-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  pointer-events: none;
}

html.dark .theme-toggle-slider::before { content: '🌙'; }
html.light .theme-toggle-slider {
  transform: translateX(20px);
  background: #E83F8F;
}
html.light .theme-toggle-slider::before { content: '☀️'; }

/* ========================================
   MOBILE MENU - THEME AWARE
   ======================================== */

@media (max-width: 960px) {
  html.dark .mobile-drawer {
    background: rgba(11, 17, 23, 0.98);
    border-left: 1px solid rgba(127, 184, 224, 0.1);
  }

  html.light .mobile-drawer {
    background: rgba(255, 253, 254, 0.98);
    border-left: 1px solid rgba(255, 194, 232, 0.3);
  }

  html.light .mobile-nav-link {
    color: var(--primary-text);
  }

  html.light .mobile-nav-link.active {
    color: var(--nav-active);
    background: rgba(4, 207, 255, 0.08);
  }

  html.light .mobile-nav-group-label {
    color: var(--snek-neon);
  }

  html.light .mobile-drawer-header,
  html.light .mobile-drawer-footer {
    border-color: rgba(255, 194, 232, 0.2);
  }

  html.light .mobile-overlay {
    background: rgba(0, 0, 0, 0.3);
  }
}

/* ========================================
   SMOOTH TRANSITIONS
   ======================================== */

body, .glass, .card, .nav-container, .footer-container,
.input, .textarea, .select, .nav-link, .btn, h1, h2, h3, h4, h5, h6, p, a, code {
  transition: background-color 0.5s ease,
              border-color 0.5s ease,
              color 0.5s ease,
              box-shadow 0.3s ease;
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto !important; }
}

@media (prefers-contrast: high) {
  html.dark {
    --bg-body: #000000;
    --text-heading: #FFFFFF;
    --text-body: #FFFFFF;
    --snek-neon: #00FFFF;
    --snek-pink: #FF69B4;
  }
  html.light {
    --bg-body: #FFFFFF;
    --text-heading: #000000;
    --text-body: #000000;
  }
  .glass { border-width: 2px !important; }
  .btn { border: 2px solid currentColor !important; }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  body { background: white !important; color: black !important; }
  .nav-container, .footer-container, .theme-toggle, .btn { display: none !important; }
  .glass, .card { background: white !important; border: 1px solid #ddd !important; }
  a { text-decoration: underline !important; color: blue !important; }
}