/* ==========================================================================
   THEMES.CSS - 5 Radically Differentiated Visual & Structural Themes
   ========================================================================== */

/* --------------------------------------------------------------------------
   THEME 1: Cyber Code IDE (data-theme="ide") - Pitch Black & Matrix Green
   -------------------------------------------------------------------------- */
html[data-theme="ide"] {
  --bg-primary: #000000;
  --bg-secondary: #040a04;
  --bg-card: rgba(0, 18, 8, 0.65);
  --border-color: rgba(0, 255, 102, 0.35);
  --text-primary: #e0ffe8;
  --text-secondary: #85d697;
  --accent-color: #00ff66;
  --accent-secondary: #00cc44;
  --font-heading: 'JetBrains Mono', monospace;
  --font-body: 'JetBrains Mono', monospace;
  --card-shadow: 0 10px 30px rgba(0, 255, 102, 0.1);
  --border-radius: 8px;
}

html[data-theme="ide"] body {
  font-family: var(--font-mono);
  background-color: #000000 !important;
}

/* Ensure Canvas at z-index:0 is NEVER Hidden Behind Body Background */
html[data-theme="ide"] .main-container,
html[data-theme="ide"] main,
html[data-theme="ide"] section,
html[data-theme="ide"] .hero-section,
html[data-theme="ide"] .section-padding,
html[data-theme="ide"] .footer-section,
html[data-theme="ide"] .timeline-container,
html[data-theme="ide"] .culture-grid,
html[data-theme="ide"] .tools-grid {
  background: transparent !important;
  position: relative;
  z-index: 2;
}

html[data-theme="ide"] .tilt-card,
html[data-theme="ide"] .timeline-card,
html[data-theme="ide"] .culture-card,
html[data-theme="ide"] .ide-container,
html[data-theme="ide"] .n8n-container,
html[data-theme="ide"] .tool-card,
html[data-theme="ide"] .hero-card,
html[data-theme="ide"] .project-highlight-box {
  border: 1px solid rgba(0, 255, 102, 0.35) !important;
  border-radius: 8px;
  background: rgba(0, 18, 8, 0.65) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  box-shadow: 0 8px 32px rgba(0, 255, 102, 0.12) !important;
  position: relative;
  z-index: 3;
}

html[data-theme="ide"] .ide-body,
html[data-theme="ide"] .ide-console,
html[data-theme="ide"] .story-output-box {
  background: rgba(0, 10, 4, 0.85) !important;
}

html[data-theme="ide"] .section-title::before {
  content: '/* ';
  color: #00cc44;
}

html[data-theme="ide"] .section-title::after {
  content: ' */';
  color: #00cc44;
}

/* --------------------------------------------------------------------------
   THEME 2: Football Pitch & Tactics (data-theme="football")
   -------------------------------------------------------------------------- */
html[data-theme="football"] {
  --bg-primary: #0b2310;
  --bg-secondary: #06150a;
  --bg-card: rgba(15, 48, 22, 0.92);
  --border-color: rgba(240, 240, 240, 0.4);
  --text-primary: #ffffff;
  --text-secondary: #a3c9ab;
  --accent-color: #fde100;
  --accent-secondary: #6cabdd;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Outfit', sans-serif;
  --card-shadow: 0 10px 30px rgba(0, 50, 15, 0.7);
  --border-radius: 0px;
}

html[data-theme="football"] .tilt-card {
  border: 2px solid #ffffff;
  border-radius: 0px;
  background: #0f3016;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
}

html[data-theme="football"] .team-tag.bvb {
  background: #fde100;
  color: #111;
  font-weight: 700;
}
html[data-theme="football"] .team-tag.arsenal {
  background: #ef0107;
  color: #fff;
  font-weight: 700;
}
html[data-theme="football"] .team-tag.mancity {
  background: #6cabdd;
  color: #111;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   THEME 3: Cinema Noir (data-theme="cinema")
   -------------------------------------------------------------------------- */
html[data-theme="cinema"] {
  --bg-primary: #08090c;
  --bg-secondary: #12151c;
  --bg-card: rgba(18, 21, 28, 0.95);
  --border-color: rgba(197, 160, 89, 0.4);
  --text-primary: #f5f5f5;
  --text-secondary: #c5a059;
  --accent-color: #c5a059;
  --accent-secondary: #e50914;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Outfit', sans-serif;
  --card-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);
  --border-radius: 16px;
}

html[data-theme="cinema"] .tilt-card {
  border: 1px solid #c5a059;
  box-shadow: 0 0 25px rgba(197, 160, 89, 0.15);
  background: linear-gradient(145deg, #12151c, #0a0b0e);
}

html[data-theme="cinema"] .section-title {
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 2px;
}

/* --------------------------------------------------------------------------
   THEME 4: Swiss Editorial Paper (data-theme="swiss")
   -------------------------------------------------------------------------- */
html[data-theme="swiss"] {
  --bg-primary: #f5f2eb;
  --bg-secondary: #eae5d9;
  --bg-card: #ffffff;
  --border-color: #1c1c1c;
  --text-primary: #1c1c1c;
  --text-secondary: #4a4a4a;
  --accent-color: #9e2a2b;
  --accent-secondary: #2b2d42;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Outfit', sans-serif;
  --card-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  --border-radius: 0px;
}

html[data-theme="swiss"] .tilt-card {
  border: 2px solid #1c1c1c;
  border-radius: 0px;
  background: #ffffff;
  box-shadow: 6px 6px 0px #1c1c1c;
}

html[data-theme="swiss"] .section-title {
  font-family: 'Cormorant Garamond', serif;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #1c1c1c;
}

/* --------------------------------------------------------------------------
   THEME 5: Travel Story Log (data-theme="travel")
   -------------------------------------------------------------------------- */
html[data-theme="travel"] {
  --bg-primary: #2c1d11;
  --bg-secondary: #1f140b;
  --bg-card: rgba(48, 33, 20, 0.92);
  --border-color: rgba(212, 175, 55, 0.4);
  --text-primary: #eedcbe;
  --text-secondary: #c4ab84;
  --accent-color: #d4af37;
  --accent-secondary: #e07a5f;
  --font-heading: 'Courier Prime', monospace;
  --font-body: 'Outfit', sans-serif;
  --card-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
  --border-radius: 20px;
}

html[data-theme="travel"] .tilt-card {
  border: 1px solid #d4af37;
  border-radius: 20px;
  background: #302114;
}

/* Theme Switching Transition */
html {
  transition: background var(--transition-speed) ease, color var(--transition-speed) ease;
}