/**
 * SI658 Theme System - Dark Mode Toggle
 * 
 * Two modes:
 * - default: Original cave-painting aesthetic
 * - shout: Mötley Crüe dark mode - warm charcoal + blood red
 * 
 * Toggle via stealth pentagram in footer.
 * Choice persists in localStorage (PWA-compatible).
 */

/* ═══════════════════════════════════════════════════════════════════════
   DEFAULT MODE (Original Cave Painting)
   Explicit styles to ensure original look when no theme is selected
   ═══════════════════════════════════════════════════════════════════════ */

:root:not([data-theme]),
[data-theme="default"] {
  --header-bg: var(--primary, #264653);
  --nav-tab-bg: var(--slate, #264653);
  --cave-painting-opacity: 0.6;
  --cave-painting-active-opacity: 0.85;
}

:root:not([data-theme]) .app-header,
[data-theme="default"] .app-header {
  background: var(--primary, #264653);
}

:root:not([data-theme]) .app-header::after,
[data-theme="default"] .app-header::after {
  background: var(--primary, #264653);
}

:root:not([data-theme]) .nav-tab::before,
[data-theme="default"] .nav-tab::before {
  opacity: 0.6;
}

:root:not([data-theme]) .nav-tab.active::before,
[data-theme="default"] .nav-tab.active::before {
  opacity: 0.85;
}

:root:not([data-theme]) .nav-tab::after,
[data-theme="default"] .nav-tab::after {
  display: block;
}

:root:not([data-theme]) .nav-tabs,
[data-theme="default"] .nav-tabs {
  background: linear-gradient(180deg, var(--primary, #264653) 0%, var(--slate, #264653) 100%);
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK MODE: SHOUT AT THE DEVIL (Mötley Crüe)
   Warm charcoals (not pure black), blood red accents, improved contrast
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="shout"] {
  /* === V4 DARK THEME GRAYS === */
  --dark-950: #0C0C0E;
  --dark-900: #131316;
  --dark-850: #1A1A1E;
  --dark-800: #222226;
  --dark-750: #2A2A2F;
  --dark-700: #333338;
  --dark-650: #3D3D43;
  --dark-600: #4A4A52;
  --dark-500: #5C5C66;
  --dark-400: #7A7A85;
  --dark-300: #9E9EA8;
  --dark-200: #C4C4CC;
  --dark-100: #E8E8ED;
  --dark-50: #F5F5F7;
  
  /* === V4 BLOOD RED === */
  --blood-950: #1A0505;
  --blood-900: #330A0A;
  --blood-850: #4D0F0F;
  --blood-800: #661414;
  --blood-700: #8B1A1A;
  --blood-600: #A61C1C;
  --blood-500: #C41E1E;
  --blood-400: #DC2626;
  --blood-300: #EF4444;
  --blood-200: #F87171;
  --blood-100: #FECACA;
  --blood-50: #FEF2F2;
  
  /* Legacy variable mappings */
  --void: var(--dark-950);
  --charcoal-deep: var(--dark-850);
  --charcoal: var(--dark-750);
  --charcoal-light: var(--dark-700);
  --shout-slate: var(--dark-600);
  --shout-slate-light: var(--dark-500);
  
  --blood-red: var(--blood-500);
  --blood-deep: var(--blood-700);
  --blood-dark: var(--blood-800);
  --blood-bright: var(--blood-400);
  --blood-glow: var(--blood-200);
  --blood-muted: var(--blood-800);
  --blood-wash: var(--blood-950);
  
  /* Text hierarchy - proper contrast */
  --text-primary: var(--dark-50);
  --text-secondary: var(--dark-200);
  --text-tertiary: var(--dark-300);
  --text-disabled: var(--dark-400);
  --text-on-red: #FFFFFF;
  
  /* Metallic accents */
  --chrome: var(--dark-100);
  --chrome-dark: var(--dark-300);
  --steel: var(--dark-400);
  --gunmetal: var(--dark-500);
  
  /* Map to app variables */
  --teal: var(--blood-500);
  --teal-light: var(--blood-400);
  --teal-dark: var(--blood-700);
  --slate: var(--dark-850);
  --slate-light: var(--dark-750);
  --slate-lighter: var(--dark-700);
  
  --brown: var(--steel);
  --brown-light: var(--chrome-dark);
  --tan: var(--chrome);
  --sand: var(--dark-700);
  --cream: var(--text-primary);
  
  --coral: var(--blood-400);
  --coral-light: var(--blood-200);
  --gold: var(--chrome);
  
  /* Semantic colors */
  --primary: var(--text-primary);
  --accent: var(--blood-500);
  --accent-dim: var(--blood-700);
  --highlight: var(--blood-400);
  --warm-accent: var(--chrome);
  
  /* Surfaces - v4 dark spectrum */
  --paper: var(--dark-900);
  --paper-warm: var(--dark-850);
  --card-bg: var(--dark-750);
  
  /* Text */
  --ink: var(--text-primary);
  --ink-light: var(--text-secondary);
  --ink-lighter: var(--text-tertiary);
  
  /* Borders */
  --border: var(--dark-600);
  --border-light: var(--dark-700);
  
  /* Phase colors */
  --phase-intro: var(--text-tertiary);
  --phase-research: var(--blood-500);
  --phase-synthesis: var(--blood-700);
  --phase-making: var(--blood-400);
  --phase-demo: var(--chrome);
  --phase-break: var(--steel);
  
  /* Nav tab styling */
  --cave-painting-opacity: 0;
  --cave-painting-active-opacity: 0;
  --nav-tab-text-shadow: none;
  --nav-tab-bg: var(--dark-750);
  --header-bg: var(--dark-850);
  
  /* Shout-specific fonts */
  --font-display: 'UnifrakturMaguntia', 'Old English Text MT', serif;
  --font-heading: 'Oswald', 'Source Sans 3', sans-serif;
  --font-body: 'Inter', 'Source Sans 3', sans-serif;
}

/* Shout theme - body styling */
[data-theme="shout"] body {
  font-family: var(--font-body);
  color: var(--text-secondary);
  background-color: var(--dark-900);
  -webkit-font-smoothing: antialiased;
}

/* Shout theme - typography overrides */
[data-theme="shout"] h1,
[data-theme="shout"] h2,
[data-theme="shout"] h3,
[data-theme="shout"] h4 {
  font-family: var(--font-heading); /* Oswald for all headings */
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ONLY the app header title gets the custom Mötley font */
[data-theme="shout"] .header-title {
  font-family: 'MotleyDisplay', 'UnifrakturMaguntia', serif;
  font-style: italic;
  text-shadow: 0 0 20px rgba(196, 30, 30, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Everything else uses Oswald - no blackletter */
[data-theme="shout"] .overview-question {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  color: var(--blood-400);
  text-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}

/* Case study titles - Oswald not blackletter */
[data-theme="shout"] .casestudy-original-title,
[data-theme="shout"] .casestudy-title {
  font-family: var(--font-heading);
  text-transform: none;
}

/* Shout theme - card styling */
[data-theme="shout"] .card {
  background: var(--dark-750);
  border: 1px solid var(--dark-700);
}

[data-theme="shout"] .card:hover {
  border-color: var(--blood-500);
  box-shadow: 
    0 0 20px rgba(196, 30, 30, 0.15),
    inset 0 0 30px rgba(196, 30, 30, 0.03);
}

[data-theme="shout"] .card-header,
[data-theme="shout"] .card-footer {
  background: var(--dark-700);
  border-color: var(--dark-700);
}

/* Shout theme - navigation */
[data-theme="shout"] .app-header {
  background: var(--dark-850);
  border-bottom: 1px solid var(--dark-700);
}

[data-theme="shout"] .app-header::after {
  background: var(--dark-850);
}

[data-theme="shout"] .nav-tabs {
  background: linear-gradient(180deg, var(--dark-850) 0%, var(--dark-800) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-theme="shout"] .nav-tab {
  background: var(--dark-750);
  border: 1px solid var(--dark-700);
  color: var(--text-secondary);
}

[data-theme="shout"] .nav-tab::before,
[data-theme="shout"] .nav-tab::after {
  display: none;
}

[data-theme="shout"] .nav-tab:hover {
  border-color: var(--dark-600);
  color: var(--text-primary);
  background: var(--dark-700);
}

[data-theme="shout"] .nav-tab.active {
  background: linear-gradient(180deg, var(--blood-500) 0%, var(--blood-700) 100%);
  border-color: var(--blood-500);
  color: var(--text-on-red);
  box-shadow: 
    0 0 20px rgba(196, 30, 30, 0.3),
    0 0 40px rgba(196, 30, 30, 0.15);
  position: relative;
  overflow: hidden;
}

/* Large pentagram - only a fragment visible through each button */
[data-theme="shout"] .nav-tab.active::after {
  content: '⛤' !important; /* Outlined/thin pentagram */
  background: none !important;
  font-size: 28rem;
  color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
  transform: rotate(72deg);
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
}

/* Each tab shows a different portion of the pentagram */
[data-theme="shout"] .nav-tab[data-hand="1"].active::after { top: -200%; left: -150%; }
[data-theme="shout"] .nav-tab[data-hand="2"].active::after { top: -150%; left: -50%; }
[data-theme="shout"] .nav-tab[data-hand="3"].active::after { top: -100%; left: 50%; }
[data-theme="shout"] .nav-tab[data-hand="4"].active::after { top: -50%; left: -100%; }
[data-theme="shout"] .nav-tab[data-hand="5"].active::after { top: -180%; left: 30%; }
[data-theme="shout"] .nav-tab[data-hand="6"].active::after { top: 30%; left: -80%; }
[data-theme="shout"] .nav-tab[data-hand="7"].active::after { top: -120%; left: 80%; }
[data-theme="shout"] .nav-tab[data-hand="8"].active::after { top: 0%; left: -30%; }
[data-theme="shout"] .nav-tab[data-hand="9"].active::after { top: -220%; left: -180%; }

[data-theme="shout"] .nav-tab-label {
  text-shadow: none;
  color: inherit;
  position: relative;
  z-index: 1;
}

[data-theme="shout"] .nav-tab.active .nav-tab-label {
  color: var(--text-on-red);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Shout theme - links */
[data-theme="shout"] a {
  color: var(--blood-400);
}

[data-theme="shout"] a:hover {
  color: var(--blood-200);
}

/* Shout theme - hero banner */
[data-theme="shout"] .overview-hero-banner {
  filter: grayscale(60%) brightness(0.5) contrast(1.1);
}

[data-theme="shout"] .overview-hero-banner .hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(26, 5, 5, 0.6) 0%,
    rgba(19, 19, 22, 0.9) 100%
  );
}

/* Shout theme - footer */
[data-theme="shout"] .umsi-footer {
  background: var(--dark-850);
  border-top: 1px solid var(--dark-700);
}

[data-theme="shout"] .footer-logo {
  filter: grayscale(100%) brightness(1.5);
}

/* Shout theme - selection */
[data-theme="shout"] ::selection {
  background: var(--blood-500);
  color: var(--text-on-red);
}

/* Shout theme - scrollbar */
[data-theme="shout"]::-webkit-scrollbar {
  width: 8px;
  background: var(--dark-900);
}

[data-theme="shout"]::-webkit-scrollbar-thumb {
  background: var(--blood-500);
  border-radius: 4px;
}

[data-theme="shout"]::-webkit-scrollbar-thumb:hover {
  background: var(--blood-400);
}

/* Glow pulse animation - subtle */
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 
      0 0 10px rgba(196, 30, 30, 0.2),
      0 0 20px rgba(196, 30, 30, 0.1);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(196, 30, 30, 0.3),
      0 0 40px rgba(196, 30, 30, 0.15);
  }
}

[data-theme="shout"] .nav-tab.active {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* Shout theme - session cards */
[data-theme="shout"] .session-card {
  background: var(--dark-750);
  border-color: var(--dark-700);
}

[data-theme="shout"] .session-card::before {
  background: var(--blood-500);
}

/* Shout theme - session question (the illegible blackletter) */
[data-theme="shout"] .session-question {
  font-family: var(--font-heading); /* Oswald instead of UnifrakturMaguntia */
  font-style: normal;
  font-weight: 500;
  color: var(--text-primary);
  text-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}

[data-theme="shout"] .session-meta {
  color: var(--text-tertiary);
}

[data-theme="shout"] .session-week {
  color: var(--blood-400);
}

[data-theme="shout"] .session-date {
  color: var(--text-tertiary);
}

[data-theme="shout"] .session-phase {
  color: var(--text-disabled);
}

[data-theme="shout"] .session-theme {
  color: var(--text-secondary);
}

[data-theme="shout"] .session-description {
  color: var(--text-secondary);
}

/* Shout theme - session expand button - HIGH SPECIFICITY */
[data-theme="shout"] .session-card .session-expand {
  color: #DC2626 !important;
  border-top: 1px solid #333338;
  background: transparent;
  display: block;
  width: 100%;
  padding: 1rem;
  font-size: 0.875rem;
  cursor: pointer;
}

[data-theme="shout"] .session-card .session-expand:hover {
  background: #333338;
  color: #F87171 !important;
}

[data-theme="shout"] .session-card .session-expand .expand-text,
[data-theme="shout"] .session-card .session-expand .collapse-text {
  color: inherit !important;
}

/* Ensure expanded state works in dark mode */
[data-theme="shout"] .session-card.expanded .session-expand .expand-text {
  display: none !important;
}

[data-theme="shout"] .session-card .session-expand .collapse-text {
  display: none;
}

[data-theme="shout"] .session-card.expanded .session-expand .collapse-text {
  display: inline !important;
}

/* Shout theme - session details */
[data-theme="shout"] .session-details {
  background: var(--dark-700);
  border-radius: 4px;
  padding: 1rem;
}

[data-theme="shout"] .session-detail-section h4 {
  color: var(--text-primary);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

[data-theme="shout"] .session-detail-section ul {
  color: var(--text-secondary);
}

[data-theme="shout"] .session-detail-section a {
  color: var(--blood-400);
}

[data-theme="shout"] .session-detail-section a:hover {
  color: var(--blood-200);
}

[data-theme="shout"] .bring-tag {
  background: var(--blood-950);
  color: var(--blood-400);
  border: 1px solid var(--blood-800);
}

/* Shout theme - reflection prompt */
[data-theme="shout"] .session-detail-section p[style*="background"] {
  background: var(--dark-800) !important;
  color: var(--text-secondary) !important;
}

/* Shout theme - calendar */
[data-theme="shout"] .calendar-event {
  background: var(--dark-750);
  border-left-color: var(--blood-500);
}

[data-theme="shout"] .calendar-event-clickable:hover {
  background: var(--dark-700);
}

[data-theme="shout"] .calendar-event-date {
  color: var(--text-tertiary);
}

[data-theme="shout"] .calendar-event-title {
  color: var(--text-primary);
}

[data-theme="shout"] .calendar-event-detail {
  color: var(--text-tertiary);
}

[data-theme="shout"] .calendar-event-arrow {
  color: var(--blood-400);
}

[data-theme="shout"] .calendar-event[data-type="deadline"] {
  --phase-color: var(--blood-400);
}

[data-theme="shout"] .calendar-event[data-type="break"] {
  --phase-color: var(--dark-500);
}

[data-theme="shout"] .calendar-month-header {
  color: var(--text-primary);
}

[data-theme="shout"] .calendar-month-header::before {
  background: var(--blood-500);
}

[data-theme="shout"] .calendar-timeline::before {
  background: var(--dark-600);
}

/* Shout theme - wednesday/next class view */
[data-theme="shout"] .wednesday-hero {
  background: linear-gradient(135deg, var(--dark-800) 0%, var(--dark-750) 100%);
  border: 1px solid var(--dark-700);
}

[data-theme="shout"] .wednesday-hero::before {
  background: var(--dark-600);
}

[data-theme="shout"] .wednesday-date {
  color: var(--text-tertiary);
}

[data-theme="shout"] .wednesday-week {
  color: var(--text-primary);
}

[data-theme="shout"] .wednesday-question {
  color: var(--text-secondary);
  font-family: var(--font-heading);
  font-style: normal;
}

[data-theme="shout"] .wednesday-countdown {
  color: var(--text-secondary);
}

/* Shout theme - checklist */
[data-theme="shout"] .checklist-item {
  background: var(--dark-750);
  border-color: var(--dark-700);
}

[data-theme="shout"] .checklist-item:hover {
  border-color: var(--blood-500);
}

[data-theme="shout"] .checklist-check {
  border-color: var(--dark-500);
}

[data-theme="shout"] .checklist-item.completed .checklist-check {
  background: var(--blood-500);
  border-color: var(--blood-500);
}

[data-theme="shout"] .checklist-title {
  color: var(--blood-400);
}

[data-theme="shout"] .checklist-detail {
  color: var(--text-tertiary);
}

[data-theme="shout"] .checklist-meta {
  color: var(--text-disabled);
}

/* Shout theme - quotes */
[data-theme="shout"] .quote-card {
  background: var(--dark-750);
  border-left-color: var(--blood-500);
}

[data-theme="shout"] .quote-card::before {
  color: var(--blood-400);
}

[data-theme="shout"] .quote-text {
  color: var(--text-secondary);
}

[data-theme="shout"] .quote-attribution {
  color: var(--text-tertiary);
}

/* Shout theme - empty state */
[data-theme="shout"] .empty-state {
  color: var(--text-tertiary);
}

/* Shout theme - section headings */
[data-theme="shout"] .wednesday-section h3 {
  color: var(--text-primary);
}

/* Shout theme - readings */
[data-theme="shout"] .reading-item {
  background: var(--dark-750);
  border-color: var(--dark-700);
}

[data-theme="shout"] .reading-item:hover {
  border-color: var(--blood-500);
}

[data-theme="shout"] .reading-icon {
  background: var(--dark-700);
}

[data-theme="shout"] .reading-title {
  color: var(--text-primary);
}

[data-theme="shout"] .reading-author {
  color: var(--text-tertiary);
}

[data-theme="shout"] .reading-pages,
[data-theme="shout"] .reading-time {
  color: var(--text-disabled);
}

[data-theme="shout"] .reading-context {
  background: var(--dark-700);
  border-left-color: var(--blood-500);
  color: var(--text-secondary);
}

[data-theme="shout"] .timing-tag {
  background: var(--dark-700);
}

[data-theme="shout"] .timing-start {
  color: var(--blood-400);
}

[data-theme="shout"] .timing-due {
  color: var(--text-secondary);
}

[data-theme="shout"] .week-badge {
  background: var(--dark-600);
}

[data-theme="shout"] .week-badge:hover {
  background: var(--blood-500);
}

[data-theme="shout"] .reading-link {
  background: transparent;
  border: 1px solid var(--blood-500);
  color: var(--blood-400);
}

[data-theme="shout"] .reading-link:hover {
  background: var(--blood-500);
  color: white;
}

/* ═══════════════════════════════════════════════════════════════════════
   SHOUT THEME - OVERVIEW HERO (The Glam Treatment)
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="shout"] .overview-hero-banner {
  background: linear-gradient(
    180deg,
    var(--blood-950) 0%,
    var(--dark-900) 100%
  );
  border: 1px solid var(--blood-800);
  border-radius: 8px;
  margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-lg)) var(--space-lg);
  position: relative;
  overflow: hidden;
}

/* Pentagram watermark behind hero */
[data-theme="shout"] .overview-hero-banner::before {
  content: '⛧';
  position: absolute;
  font-size: 20rem;
  color: var(--blood-900);
  opacity: 0.3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(72deg);
  pointer-events: none;
  z-index: 0;
}

/* Subtle glow lines */
[data-theme="shout"] .overview-hero-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(ellipse at 50% 0%, rgba(196, 30, 30, 0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 100%, rgba(196, 30, 30, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

[data-theme="shout"] .hero-overlay {
  position: relative;
  z-index: 2;
  background: transparent;
}

[data-theme="shout"] .overview-hero-banner .overview-question {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 400;
  color: var(--blood-400);
  text-shadow: 0 0 40px rgba(196, 30, 30, 0.5);
  letter-spacing: 0.02em;
}

/* Stat cards - dark with red accents */
[data-theme="shout"] .stat-card {
  background: var(--dark-800);
  border: 1px solid var(--dark-700);
  position: relative;
  overflow: hidden;
}

[data-theme="shout"] .stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--blood-500), transparent);
}

[data-theme="shout"] .stat-value {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: 1.5rem;
}

[data-theme="shout"] .stat-label {
  color: var(--blood-400);
  font-family: var(--font-heading);
  letter-spacing: 0.1em;
}

/* Course description card */
[data-theme="shout"] .overview-description {
  background: var(--dark-800);
  border: 1px solid var(--dark-700);
}

[data-theme="shout"] .overview-description h3 {
  color: var(--text-primary);
}

/* Shout theme - team cards */
[data-theme="shout"] .team-card {
  background: var(--dark-750);
  border-color: var(--dark-700);
}

[data-theme="shout"] .team-card:hover {
  border-color: var(--blood-500);
}

[data-theme="shout"] .team-bio {
  color: var(--text-secondary);
}

/* Fix the fade gradient on bio text - was showing white on dark */
[data-theme="shout"] .team-bio:not(.expanded) .team-bio-content::after {
  background: linear-gradient(transparent, var(--dark-750));
}

[data-theme="shout"] .team-bio-toggle {
  color: var(--blood-400);
}

[data-theme="shout"] .team-bio-toggle:hover {
  color: var(--blood-200);
}

[data-theme="shout"] .team-name {
  color: var(--text-primary);
}

[data-theme="shout"] .team-role {
  color: var(--blood-400);
}

[data-theme="shout"] .team-title {
  color: var(--text-tertiary);
}

[data-theme="shout"] .team-email {
  color: var(--blood-400);
}

[data-theme="shout"] .team-email:hover {
  color: var(--blood-200);
}

[data-theme="shout"] .team-research {
  color: var(--text-tertiary);
}

[data-theme="shout"] .team-website {
  color: var(--blood-400);
}

[data-theme="shout"] .team-website:hover {
  color: var(--blood-200);
}

/* Shout theme - team overlay (bio popup) */
[data-theme="shout"] .team-overlay {
  background: rgba(12, 12, 14, 0.95);
}

[data-theme="shout"] .team-overlay-content {
  background: var(--dark-800);
  border: 1px solid var(--dark-700);
}

[data-theme="shout"] .team-overlay-close {
  color: var(--text-tertiary);
}

[data-theme="shout"] .team-overlay-close:hover {
  color: var(--text-primary);
}

[data-theme="shout"] .team-overlay-photo {
  border-color: var(--dark-600);
}

[data-theme="shout"] .team-overlay-name {
  color: var(--text-primary);
  font-family: var(--font-heading);
}

[data-theme="shout"] .team-overlay-role {
  color: var(--blood-400);
}

[data-theme="shout"] .team-overlay-title {
  color: var(--text-tertiary);
}

[data-theme="shout"] .team-overlay-email {
  color: var(--blood-400);
}

[data-theme="shout"] .team-overlay-bio {
  color: var(--text-secondary);
}

[data-theme="shout"] .team-overlay-bio strong {
  color: var(--text-primary);
}

[data-theme="shout"] .team-overlay-research {
  color: var(--text-tertiary);
}

[data-theme="shout"] .team-overlay-footer {
  border-top-color: var(--dark-700);
}

[data-theme="shout"] .team-overlay-footer a {
  color: var(--blood-400);
}

/* Shout theme - anticipation cards (What to Expect) */
[data-theme="shout"] .anticipation-card {
  background: var(--dark-750);
  border-color: var(--dark-700);
}

[data-theme="shout"] .anticipation-card h4 {
  color: var(--blood-400);
}

[data-theme="shout"] .anticipation-card p {
  color: var(--text-secondary);
}

[data-theme="shout"] .anticipation-card ul {
  color: var(--text-secondary);
}

[data-theme="shout"] .anticipation-card li::before {
  color: var(--blood-400);
}

/* ═══════════════════════════════════════════════════════════════════════
   STEALTH DARK MODE TOGGLE - Pentagram in Footer
   ═══════════════════════════════════════════════════════════════════════ */

.dark-mode-toggle {
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 1rem;
  opacity: 0.15;
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark-mode-toggle:hover {
  opacity: 0.4;
}

.dark-mode-toggle:active {
  transform: scale(0.95);
}

/* The pentagram - very subtle */
.dark-mode-toggle::before {
  content: '⛧';
  font-size: 1.1rem;
  color: var(--ink, #2C1810);
  display: block;
  line-height: 1;
  transform: rotate(72deg);
}

/* When dark mode is active - pentagram glows red */
[data-theme="shout"] .dark-mode-toggle {
  opacity: 0.6;
}

[data-theme="shout"] .dark-mode-toggle::before {
  color: var(--blood-500);
  text-shadow: 0 0 8px rgba(196, 30, 30, 0.6);
}

[data-theme="shout"] .dark-mode-toggle:hover {
  opacity: 1;
}

[data-theme="shout"] .dark-mode-toggle:hover::before {
  text-shadow: 0 0 12px rgba(196, 30, 30, 0.8);
}

/* ═══════════════════════════════════════════════════════════════════════
   SHOUT THEME - ORM OVERLAY
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="shout"] .orm-overlay {
  background: rgba(12, 12, 14, 0.98);
}

[data-theme="shout"] .orm-overlay-header {
  background: var(--dark-800);
  border-bottom-color: var(--dark-700);
}

[data-theme="shout"] .orm-overlay-title {
  color: var(--text-primary);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-theme="shout"] .orm-overlay-subtitle {
  color: var(--blood-400);
}

[data-theme="shout"] .orm-overlay-close {
  color: var(--text-tertiary);
}

[data-theme="shout"] .orm-overlay-close:hover {
  color: var(--text-primary);
}

[data-theme="shout"] .orm-overlay-body {
  background: var(--dark-900);
}

[data-theme="shout"] .orm-canvas-container svg {
  background: var(--dark-900);
}

/* Invert SVG colors for dark mode */
[data-theme="shout"] .orm-canvas-container svg #gridRect {
  fill: var(--dark-850);
}

[data-theme="shout"] .orm-canvas-container svg #gridPattern path {
  stroke: var(--dark-750);
}

[data-theme="shout"] .orm-canvas-container .object-circle {
  fill: var(--dark-750);
  stroke: var(--blood-500);
}

[data-theme="shout"] .orm-canvas-container .object-text {
  fill: var(--text-primary);
}

[data-theme="shout"] .orm-canvas-container svg line[stroke="#374151"] {
  stroke: var(--blood-400);
}

[data-theme="shout"] .orm-canvas-container svg polygon[fill="#374151"] {
  fill: var(--blood-400);
  stroke: var(--blood-400);
}

[data-theme="shout"] .orm-overlay-footer {
  background: var(--dark-800);
  border-top-color: var(--dark-700);
  color: var(--text-tertiary);
}

[data-theme="shout"] .orm-overlay-link {
  color: var(--blood-400);
}

[data-theme="shout"] .orm-overlay-link:hover {
  color: var(--blood-200);
}

/* Shout tool card for ORM viewer */
[data-theme="shout"] .tool-card.orm-viewer-card {
  background: linear-gradient(135deg, var(--blood-950) 0%, var(--dark-750) 100%);
  border-color: var(--blood-700);
}

[data-theme="shout"] .tool-card.orm-viewer-card:hover {
  border-color: var(--blood-500);
  background: linear-gradient(135deg, var(--blood-900) 0%, var(--dark-700) 100%);
  box-shadow: 0 0 20px rgba(196, 30, 30, 0.2);
}

[data-theme="shout"] .tool-card.orm-viewer-card .tool-icon {
  background: linear-gradient(135deg, var(--blood-700) 0%, var(--blood-900) 100%);
}

[data-theme="shout"] .tool-card.orm-viewer-card .tool-name {
  color: var(--blood-400);
}

[data-theme="shout"] .tool-card.orm-viewer-card .tool-arrow {
  color: var(--blood-500);
}