/* 🎨 CUSTOM THEME */
:root {
  /* ===== COLOR PALETTE ===== */
  --primary-bg: linear-gradient(135deg, #2d1b69 0%, #11998e 50%, #2d1b69 100%);
  --body-overlay: radial-gradient(circle at 25% 75%, rgba(45, 27, 105, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 25%, rgba(17, 153, 142, 0.05) 0%, transparent 50%);
  --primary-text: #ffffff;
  --heading-color: #ffffff;
  --paragraph-color: #e0e0e0;
  --accent-primary: #ff6b6b;
  --accent-secondary: #4ecdc4;
  --accent-tertiary: #45b7d1;
  --title-gradient: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);

  /* ===== TYPOGRAPHY ===== */
  --font-primary: 'Inter', 'Roboto', sans-serif;
  --font-heading: 'Poppins', 'Arial', sans-serif;
  --font-code: 'Source Code Pro', 'Monaco', monospace;
  --heading-weight: 700;

  /* ===== EFFECTS ===== */
  --text-shadow: none;
  --glow-shadow: 0 0 0px rgba(255, 107, 107, 0.6), 0 0 0px rgba(78, 205, 196, 0.4);

  /* ===== NAVBAR ===== */
  --navbar-bg: rgba(45, 27, 105, 0.95);
  --navbar-border: 1px solid rgba(255, 107, 107, 0.2);
  --navbar-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);

  /* ===== CONTENT AREAS ===== */
  --content-bg: rgba(17, 153, 142, 0.6);
  --content-border: 1px solid rgba(255, 107, 107, 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(78, 205, 196, 0.3);

  /* ===== QUEST SECTIONS ===== */
  --quest-section-bg: rgba(17, 153, 142, 0.4);
  --quest-content-bg: rgba(17, 153, 142, 0.6);

  /* ===== QUEST LINKS ===== */
  --quest-link-bg: rgba(69, 183, 209, 0.7);
  --quest-link-border: 1px solid rgba(255, 107, 107, 0.2);
  --quest-link-text: #ffffff;
  --quest-link-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  --quest-link-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --quest-link-hover-overlay: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(78, 205, 196, 0.1) 100%);
  --quest-link-hover-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
  --quest-link-hover-text: #ff6b6b;

  /* ===== NAVIGATION BUTTONS ===== */
  --nav-button-bg: rgba(255, 107, 107, 0.1);
  --nav-button-border: 1px solid rgba(255, 107, 107, 0.3);
  --nav-button-text: #ff6b6b;
  --nav-button-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  --nav-button-transition: all 0.3s ease;
  --nav-button-hover-bg: rgba(255, 107, 107, 0.2);
  --nav-button-hover-text: #ffffff;
  --nav-button-hover-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);

  /* ===== CODE BLOCKS ===== */
  --code-block-bg: rgba(45, 27, 105, 0.9);
  --code-block-border: 1px solid rgba(255, 107, 107, 0.2);
  --code-block-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
  --code-pre-bg: rgba(30, 18, 75, 0.95);
  --code-text: #ffffff;
  --code-line-height: 1.3;

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

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