/* 📚 DEVELOPER THEME - Technical Documentation Style */
:root {
  /* ===== COLOR PALETTE ===== */
  --primary-bg: #ffffff;
  --body-overlay: none;
  --primary-text: #24292f;
  --heading-color: #1f2328;
  --paragraph-color: #656d76;
  --accent-primary: #0969da;
  --accent-secondary: #218bff;
  --accent-tertiary: #6e7781;
  --title-gradient: none;

  /* ===== TYPOGRAPHY ===== */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
  --font-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --heading-weight: 600;

  /* ===== EFFECTS ===== */
  --text-shadow: none;
  --glow-shadow: none;

  /* ===== NAVBAR ===== */
  --navbar-bg: #ffffff;
  --navbar-border: 1px solid #d1d9e0;
  --navbar-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);

  /* ===== CONTENT AREAS ===== */
  --content-bg: #ffffff;
  --content-border: 1px solid #d1d9e0;
  --content-shadow: none;
  --section-border: 1px solid #d1d9e0;

  /* ===== QUEST SECTIONS ===== */
  --quest-section-bg: #f6f8fa;
  --quest-content-bg: #ffffff;

  /* ===== QUEST LINKS ===== */
  --quest-link-bg: #ffffff;
  --quest-link-border: 1px solid #d1d9e0;
  --quest-link-text: #24292f;
  --quest-link-shadow: 0 1px 0 rgba(27, 31, 36, 0.04);
  --quest-link-transition: all 0.2s ease;
  --quest-link-hover-overlay: none;
  --quest-link-hover-shadow: 0 3px 6px rgba(140, 149, 159, 0.15);
  --quest-link-hover-text: #0969da;

  /* ===== NAVIGATION BUTTONS ===== */
  --nav-button-bg: #ffffff;
  --nav-button-border: 1px solid #d1d9e0;
  --nav-button-text: #0969da;
  --nav-button-shadow: none;
  --nav-button-transition: all 0.2s ease;
  --nav-button-hover-bg: #f3f4f6;
  --nav-button-hover-text: #0969da;
  --nav-button-hover-shadow: none;

  /* ===== CODE BLOCKS ===== */
  --code-block-bg: #f6f8fa;
  --code-block-border: 1px solid #d1d9e0;
  --code-block-shadow: none;
  --code-pre-bg: #f6f8fa;
  --code-text: #24292f;
  --code-line-height: 1.5;

  /* ===== INLINE CODE ===== */
  --inline-code-bg: rgba(175, 184, 193, 0.2);
  --inline-code-text: #0969da;
  --inline-code-border: none;

  /* ===== NAVIGATION PILLS ===== */
  --nav-link-text: #24292f;
  
  --nav-quest-pill-bg: #ffffff;
  --nav-quest-pill-border: 1px solid #d1d9e0;
  --nav-quest-pill-shadow: none;
  --nav-quest-pill-hover-bg: #f3f4f6;
  --nav-quest-pill-hover-shadow: none;
  
  --nav-theme-pill-bg: #ffffff;
  --nav-theme-pill-border: 1px solid #d1d9e0;
  --nav-theme-pill-shadow: none;
  --nav-theme-pill-hover-bg: #f3f4f6;
  --nav-theme-pill-hover-shadow: none;

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

/* ===== DEVELOPER THEME SPECIFIC OVERRIDES ===== */
/* Dark overlay for header text readability on dark background images */
.container .story-content h1::before,
.container .quest-content h1:first-child::before {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Ensure header text is white and visible on dark backgrounds */
.container .story-content h1,
.container .quest-content h1:first-child {
  color: #ffffff !important;
  text-shadow: none !important;
}

/* Fix footer text visibility */
.footer {
  background-color: #f6f8fa !important;
  border-top: 1px solid #d1d9e0 !important;
}

.footer .footer-content,
.footer .footer-content .repo-link {
  color: #656d76 !important;
}

.footer .footer-content .repo-link:hover {
  color: #0969da !important;
}

/* Fix navbar text visibility - override webkit-text-fill-color: transparent */
.navbar .nav-left a:not(.github-link) {
  color: #24292f !important;
  -webkit-text-fill-color: #24292f !important;
}

.navbar .nav-link {
  color: #24292f !important;
  -webkit-text-fill-color: #24292f !important;
}

.navbar .nav-link:hover {
  color: #0969da !important;
  -webkit-text-fill-color: #0969da !important;
}

/* Fix footer text visibility - override webkit-text-fill-color: transparent */
.footer .footer-content,
.footer .footer-content .repo-link {
  color: #656d76 !important;
  -webkit-text-fill-color: #656d76 !important;
}

.footer .footer-content .repo-link:hover {
  color: #0969da !important;
  -webkit-text-fill-color: #0969da !important;
}

/* 🌙 DEVELOPER THEME - DARK MODE VARIANT */
[data-theme="dark"] {
  /* ===== COLOR PALETTE - MODERN IDE DARKNESS ===== */
  --primary-bg: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #0d1117 100%);
  --body-overlay: radial-gradient(circle at 30% 70%, rgba(88, 166, 255, 0.08) 0%, transparent 50%), radial-gradient(circle at 70% 30%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
  --primary-text: #f0f6fc;
  --heading-color: #ffffff;
  --paragraph-color: #e6edf3;
  --accent-primary: #58a6ff;
  --accent-secondary: #3b82f6;
  --accent-tertiary: #8b5cf6;

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

  /* ===== NAVBAR ===== */
  --navbar-bg: rgba(13, 17, 23, 0.98);
  --navbar-border: 1px solid rgba(48, 54, 61, 1);
  --navbar-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);

  /* ===== CONTENT AREAS ===== */
  --content-bg: rgba(22, 27, 34, 0.95);
  --content-border: 1px solid rgba(48, 54, 61, 1);
  --content-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --section-border: 1px solid rgba(48, 54, 61, 1);

  /* ===== QUEST SECTIONS ===== */
  --quest-section-bg: rgba(22, 27, 34, 0.8);
  --quest-content-bg: rgba(22, 27, 34, 0.95);

  /* ===== QUEST LINKS ===== */
  --quest-link-bg: rgba(33, 38, 45, 0.95);
  --quest-link-border: 1px solid rgba(48, 54, 61, 1);
  --quest-link-text: #f0f6fc;
  --quest-link-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --quest-link-hover-overlay: linear-gradient(135deg, rgba(88, 166, 255, 0.1) 0%, rgba(59, 130, 246, 0.08) 100%);
  --quest-link-hover-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  --quest-link-hover-text: #58a6ff;

  /* ===== NAVIGATION BUTTONS ===== */
  --nav-button-bg: rgba(88, 166, 255, 0.1);
  --nav-button-border: 1px solid rgba(88, 166, 255, 0.3);
  --nav-button-text: #58a6ff;
  --nav-button-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --nav-button-hover-bg: rgba(88, 166, 255, 0.15);
  --nav-button-hover-text: #ffffff;
  --nav-button-hover-shadow: 0 4px 12px rgba(88, 166, 255, 0.3);

  /* ===== CODE BLOCKS - IDE-STYLE SYNTAX ===== */
  --code-block-bg: rgba(13, 17, 23, 0.98);
  --code-block-border: 1px solid rgba(48, 54, 61, 1);
  --code-block-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
  --code-pre-bg: rgba(6, 8, 12, 0.98);
  --code-text: #f0f6fc;

  /* ===== INLINE CODE ===== */
  --inline-code-text: #58a6ff;

  /* ===== NAVIGATION PILLS ===== */
  --nav-link-text: #f0f6fc;
  
  --nav-quest-pill-bg: rgba(88, 166, 255, 0.1);
  --nav-quest-pill-border: 1px solid rgba(88, 166, 255, 0.3);
  --nav-quest-pill-shadow: none;
  --nav-quest-pill-hover-bg: rgba(88, 166, 255, 0.15);
  --nav-quest-pill-hover-shadow: none;
  
  --nav-theme-pill-bg: rgba(59, 130, 246, 0.1);
  --nav-theme-pill-border: 1px solid rgba(59, 130, 246, 0.3);
  --nav-theme-pill-shadow: none;
  --nav-theme-pill-hover-bg: rgba(59, 130, 246, 0.15);
  --nav-theme-pill-hover-shadow: none;
}

/* ===== DEVELOPER THEME DARK MODE OVERRIDES ===== */
[data-theme="dark"] .container .story-content h1::before,
[data-theme="dark"] .container .quest-content h1:first-child::before {
  background: rgba(13, 17, 23, 0.9) !important;
}

[data-theme="dark"] .container .story-content h1,
[data-theme="dark"] .container .quest-content h1:first-child {
  color: #ffffff !important;
  text-shadow: none !important;
}

[data-theme="dark"] .footer .footer-content,
[data-theme="dark"] .footer .footer-content .repo-link {
  color: #8b949e !important;
  -webkit-text-fill-color: #8b949e !important;
}

[data-theme="dark"] .footer .footer-content .repo-link:hover {
  color: #58a6ff !important;
  -webkit-text-fill-color: #58a6ff !important;
}

/* ===== DARK MODE NAVBAR OVERRIDES ===== */
[data-theme="dark"] .navbar .nav-left a:not(.github-link) {
  color: #f0f6fc !important;
  -webkit-text-fill-color: #f0f6fc !important;
}

[data-theme="dark"] .navbar .nav-link {
  color: #f0f6fc !important;
  -webkit-text-fill-color: #f0f6fc !important;
}

[data-theme="dark"] .navbar .nav-link:hover {
  color: #58a6ff !important;
  -webkit-text-fill-color: #58a6ff !important;
}