/* 🚀 SPACE EXPLORATION THEME - LIGHT MODE (DEFAULT) */
:root {
  /* ===== COLOR PALETTE - BRIGHT COSMIC DAYLIGHT ===== */
  --primary-bg: linear-gradient(135deg, #e8f4f8 0%, #d1e7ff 50%, #e8f4f8 100%);
  --body-overlay: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);
  --primary-text: #1e293b;
  --heading-color: #0f172a;
  --paragraph-color: #334155;
  --accent-primary: #0ea5e9;
  --accent-secondary: #3b82f6;
  --accent-tertiary: #6366f1;
  --title-gradient: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%);

  /* ===== TYPOGRAPHY ===== */
  --font-primary: 'Exo 2', sans-serif;
  --font-heading: 'Orbitron', monospace;
  --font-code: 'JetBrains Mono', 'Courier New', monospace;
  --heading-weight: 700;

  /* ===== EFFECTS ===== */
  --text-shadow: none;
  --glow-shadow: 0 0 20px rgba(14, 165, 233, 0.3), 0 0 40px rgba(59, 130, 246, 0.2);

  /* ===== NAVBAR ===== */
  --navbar-bg: rgba(248, 250, 252, 0.95);
  --navbar-border: 1px solid rgba(14, 165, 233, 0.2);
  --navbar-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);

  /* ===== CONTENT AREAS ===== */
  --content-bg: rgba(255, 255, 255, 0.8);
  --content-border: 1px solid rgba(14, 165, 233, 0.15);
  --content-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --section-border: 2px solid rgba(59, 130, 246, 0.3);

  /* ===== QUEST SECTIONS ===== */
  --quest-section-bg: rgba(241, 245, 249, 0.6);
  --quest-content-bg: rgba(255, 255, 255, 0.8);

  /* ===== QUEST LINKS ===== */
  --quest-link-bg: rgba(241, 245, 249, 0.8);
  --quest-link-border: 1px solid rgba(14, 165, 233, 0.2);
  --quest-link-text: #1e293b;
  --quest-link-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --quest-link-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --quest-link-hover-overlay: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
  --quest-link-hover-shadow: 0 8px 25px rgba(14, 165, 233, 0.2);
  --quest-link-hover-text: #0ea5e9;

  /* ===== NAVIGATION BUTTONS ===== */
  --nav-button-bg: rgba(14, 165, 233, 0.1);
  --nav-button-border: 1px solid rgba(14, 165, 233, 0.3);
  --nav-button-text: #0ea5e9;
  --nav-button-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  --nav-button-transition: all 0.3s ease;
  --nav-button-hover-bg: rgba(14, 165, 233, 0.2);
  --nav-button-hover-text: #0f172a;
  --nav-button-hover-shadow: 0 6px 20px rgba(14, 165, 233, 0.3);

  /* ===== CODE BLOCKS ===== */
  --code-block-bg: rgba(248, 250, 252, 0.9);
  --code-block-border: 1px solid rgba(14, 165, 233, 0.2);
  --code-block-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  --code-pre-bg: rgba(241, 245, 249, 0.95);
  --code-text: #1e293b;
  --code-line-height: 1.3;

  /* ===== INLINE CODE ===== */
  --inline-code-bg: transparent;
  --inline-code-text: #0369a1;
  --inline-code-border: none;

  /* ===== NAVIGATION PILLS ===== */
  --nav-link-text: #1e293b;
  
  --nav-quest-pill-bg: rgba(14, 165, 233, 0.15);
  --nav-quest-pill-border: 1px solid rgba(14, 165, 233, 0.4);
  --nav-quest-pill-shadow: 0 2px 8px rgba(14, 165, 233, 0.2);
  --nav-quest-pill-hover-bg: rgba(14, 165, 233, 0.25);
  --nav-quest-pill-hover-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
  
  --nav-theme-pill-bg: rgba(99, 102, 241, 0.15);
  --nav-theme-pill-border: 1px solid rgba(99, 102, 241, 0.4);
  --nav-theme-pill-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
  --nav-theme-pill-hover-bg: rgba(99, 102, 241, 0.25);
  --nav-theme-pill-hover-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);

  /* ===== BACKGROUND IMAGES ===== */
  --story-bg-image: url('images/space.png');
  --quest-bg-image: url('images/space-quest.png');
  --story-background-position-percentage: 38%;
  --quest-background-position-percentage: 50%;
}

/* 🌙 SPACE THEME - DARK MODE VARIANT */
[data-theme="dark"] {
  /* ===== COLOR PALETTE - DEEP SPACE VOID ===== */
  --primary-bg: linear-gradient(135deg, #0c0c1e 0%, #1a1a3e 50%, #0c0c1e 100%);
  --body-overlay: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(100, 255, 218, 0.05) 0%, transparent 50%);
  --primary-text: #e0e6ff;
  --heading-color: #ffffff;
  --paragraph-color: #b8c5ff;
  --accent-primary: #64ffda;
  --accent-secondary: #82b1ff;
  --accent-tertiary: #7c4dff;

  /* ===== EFFECTS ===== */
  --text-shadow: none;
  --glow-shadow: 0 0 20px rgba(100, 255, 218, 0.6), 0 0 40px rgba(130, 177, 255, 0.4);

  /* ===== NAVBAR ===== */
  --navbar-bg: rgba(12, 12, 30, 0.95);
  --navbar-border: 1px solid rgba(100, 255, 218, 0.2);
  --navbar-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

  /* ===== CONTENT AREAS ===== */
  --content-bg: rgba(26, 26, 62, 0.6);
  --content-border: 1px solid rgba(100, 255, 218, 0.15);
  --content-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --section-border: 2px solid rgba(130, 177, 255, 0.3);

  /* ===== QUEST SECTIONS ===== */
  --quest-section-bg: rgba(26, 26, 62, 0.4);
  --quest-content-bg: rgba(26, 26, 62, 0.6);

  /* ===== QUEST LINKS ===== */
  --quest-link-bg: rgba(30, 30, 70, 0.7);
  --quest-link-border: 1px solid rgba(100, 255, 218, 0.2);
  --quest-link-text: #e0e6ff;
  --quest-link-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  --quest-link-hover-overlay: linear-gradient(135deg, rgba(100, 255, 218, 0.1) 0%, rgba(130, 177, 255, 0.1) 100%);
  --quest-link-hover-shadow: 0 8px 25px rgba(100, 255, 218, 0.3);
  --quest-link-hover-text: #64ffda;

  /* ===== NAVIGATION BUTTONS ===== */
  --nav-button-bg: rgba(100, 255, 218, 0.1);
  --nav-button-border: 1px solid rgba(100, 255, 218, 0.3);
  --nav-button-text: #64ffda;
  --nav-button-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  --nav-button-hover-bg: rgba(100, 255, 218, 0.2);
  --nav-button-hover-text: #ffffff;
  --nav-button-hover-shadow: 0 6px 20px rgba(100, 255, 218, 0.4);

  /* ===== CODE BLOCKS - VOID SYNTAX ===== */
  --code-block-bg: rgba(15, 15, 35, 0.9);
  --code-block-border: 1px solid rgba(100, 255, 218, 0.2);
  --code-block-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  --code-pre-bg: rgba(8, 8, 25, 0.95);
  --code-text: #e0e6ff;

  /* ===== INLINE CODE ===== */
  --inline-code-text: #64ffda;

  /* ===== NAVIGATION PILLS ===== */
  --nav-link-text: #e0e6ff;
  
  --nav-quest-pill-bg: rgba(100, 255, 218, 0.15);
  --nav-quest-pill-border: 1px solid rgba(100, 255, 218, 0.4);
  --nav-quest-pill-shadow: 0 2px 8px rgba(100, 255, 218, 0.3);
  --nav-quest-pill-hover-bg: rgba(100, 255, 218, 0.25);
  --nav-quest-pill-hover-shadow: 0 4px 12px rgba(100, 255, 218, 0.4);
  
  --nav-theme-pill-bg: rgba(124, 77, 255, 0.15);
  --nav-theme-pill-border: 1px solid rgba(124, 77, 255, 0.4);
  --nav-theme-pill-shadow: 0 2px 8px rgba(124, 77, 255, 0.3);
  --nav-theme-pill-hover-bg: rgba(124, 77, 255, 0.25);
  --nav-theme-pill-hover-shadow: 0 4px 12px rgba(124, 77, 255, 0.4);
}