/*
|--------------------------------------------------------------------------
| Reader-Focused Dark Theme
|--------------------------------------------------------------------------
| Optimized for educational platforms with extended reading sessions.
| Reduces eye strain with softer backgrounds, improved contrast ratios,
| and subtle warm undertones for better long-term readability.
*/

:root {
  color-scheme: light;
}

/* 1. System Preference: Dark */
@media (prefers-color-scheme: dark) {
  html:not(.theme-override-light):root {
    color-scheme: dark;
    --color-bg-primary: #14161c;
    --color-bg-subtle: #16181f;
    --color-bg-secondary: #1a1d26;
    --color-bg-elevated: #1c1f29;
    --color-surface-base: #1f2330;
    --color-surface-bright: #24283a;
    --color-surface-soft: #282d3f;
    --color-panel: #1f2330;
    --color-panel-muted: #23283a;
    --color-panel-edge: #2f3547;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-border-strong: rgba(255, 255, 255, 0.20);
    --color-border-muted: rgba(255, 255, 255, 0.08);
    --color-border-accent: rgba(138, 180, 255, 0.45);
    --color-button-border-dark: rgba(138, 180, 255, 0.35);
    --color-button-border-accent: rgba(138, 180, 255, 0.65);
    --color-shadow-dark: rgba(5, 8, 15, 0.65);
    --color-text-primary: #dfe2ea;
    --color-text-secondary: #c9cedd;
    --color-text-muted: #a8afc2;
    --color-text-subtle: #8f96ab;
    --color-text-disabled: #5b6274;
    --color-text-strong: #f0f2f7;
    --color-text-primary-buttons: #ffffff;
    --color-accent-primary: #8ab4ff;
    --color-accent-primary-light: #b2c9ff;
    --color-accent-primary-dark: #4f75d6;
    --color-accent-secondary: #7fe0c4;
    --color-accent-secondary-dark: #4fc09d;
    --color-accent-secondary-light: #aef5da;
    --color-accent-info: #8ab4ff;
    --color-accent-info-light: #b2c9ff;
    --color-accent-info-muted: #9ec5ff;
    --color-accent-info-strong: #5a7dff;
    --color-accent-warm: #ffb878;
    --color-accent-danger: #ff8b94;
    --color-accent-danger-strong: #ff6b7a;
    --color-accent-danger-soft: #ffb3bb;
    --color-accent-success: #56d9a3;
    --color-surface-dark: #1c1f29;
    --color-surface-deep: #16181f;
    --color-surface-deeper: #14161c;
    --color-surface-darkest: #0d0f13;
    --color-button-dark: #282d3f;
    --image-filter-dark: brightness(1) contrast(1.1) saturate(1.05)
    drop-shadow(0 24px 45px rgba(255, 255, 255, 0.60));
  }
}

/* 2. User Override: Dark */
html.theme-override-dark:root {
  color-scheme: dark;
  --color-bg-primary: #14161c;
  --color-bg-subtle: #16181f;
  --color-bg-secondary: #1a1d26;
  --color-bg-elevated: #1c1f29;
  --color-surface-base: #1f2330;
  --color-surface-bright: #24283a;
  --color-surface-soft: #282d3f;
  --color-panel: #1f2330;
  --color-panel-muted: #23283a;
  --color-panel-edge: #2f3547;
  --color-border: rgba(255, 255, 255, 0.12);
  --color-border-strong: rgba(255, 255, 255, 0.20);
  --color-border-muted: rgba(255, 255, 255, 0.08);
  --color-border-accent: rgba(138, 180, 255, 0.45);
  --color-button-border-dark: rgba(138, 180, 255, 0.35);
  --color-button-border-accent: rgba(138, 180, 255, 0.65);
  --color-shadow-dark: rgba(5, 8, 15, 0.65);
  --color-text-primary: #dfe2ea;
  --color-text-secondary: #c9cedd;
  --color-text-muted: #a8afc2;
  --color-text-subtle: #8f96ab;
  --color-text-disabled: #5b6274;
  --color-text-strong: #f0f2f7;
  --color-accent-primary: #8ab4ff;
  --color-accent-primary-light: #b2c9ff;
  --color-accent-primary-dark: #4f75d6;
  --color-accent-secondary: #7fe0c4;
  --color-accent-secondary-dark: #4fc09d;
  --color-accent-secondary-light: #aef5da;
  --color-accent-info: #8ab4ff;
  --color-accent-info-light: #b2c9ff;
  --color-accent-info-muted: #9ec5ff;
  --color-accent-info-strong: #5a7dff;
  --color-accent-warm: #ffb878;
  --color-accent-danger: #ff8b94;
  --color-accent-danger-strong: #ff6b7a;
  --color-accent-danger-soft: #ffb3bb;
  --color-accent-success: #56d9a3;
  --color-surface-dark: #1c1f29;
  --color-surface-deep: #16181f;
  --color-surface-deeper: #14161c;
  --color-surface-darkest: #0d0f13;
  --color-button-dark: #282d3f;
  --image-filter-dark: brightness(1) contrast(1.1) saturate(1.05)
    drop-shadow(0 24px 45px rgba(255, 255, 255, 0.60));
}

/* Apply base dark theme body styles */
@media (prefers-color-scheme: dark) {
  html:not(.theme-override-light) body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
  }
}

html.theme-override-dark body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Combine selectors for component styles */
html:not(.theme-override-light) .card,
html.theme-override-dark .card,
html:not(.theme-override-light) .panel,
html.theme-override-dark .panel,
html:not(.theme-override-light) .section,
html.theme-override-dark .section,
html:not(.theme-override-light) .homepage-card,
html.theme-override-dark .homepage-card,
html:not(.theme-override-light) .course-card,
html.theme-override-dark .course-card,
html:not(.theme-override-light) .plan-card,
html.theme-override-dark .plan-card,
html:not(.theme-override-light) .module-card,
html.theme-override-dark .module-card,
html:not(.theme-override-light) .info-card,
html.theme-override-dark .info-card {
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.55);
}

html:not(.theme-override-light) .header-sign-in-btn,
html.theme-override-dark .header-sign-in-btn,
html:not(.theme-override-light) .header-nav-menu-btn,
html.theme-override-dark .header-nav-menu-btn,
html:not(.theme-override-light) .dashboard-header-menu-btn,
html.theme-override-dark .dashboard-header-menu-btn {
  box-shadow: 0 0 0 1px var(--color-border-muted);
}

html:not(.theme-override-light) .side-panel-nav-btn svg path,
html.theme-override-dark .side-panel-nav-btn svg path,
html:not(.theme-override-light) .side-panel-toc-container svg path,
html.theme-override-dark .side-panel-toc-container svg path,
html:not(.theme-override-light) .module-sources-header-expand p,
html.theme-override-dark .module-sources-header-expand p,
html:not(.theme-override-light) .toc-btn-arrow svg path,
html.theme-override-dark .toc-btn-arrow svg path {
  fill: var(--color-accent-primary);
  color: var(--color-accent-primary);
}

html:not(.theme-override-light) img.dark-mode-invertible,
html.theme-override-dark img.dark-mode-invertible {
  filter: brightness(0.88) contrast(1.06);
}

html:not(.theme-override-light) .header-logo-container a img,
html.theme-override-dark .header-logo-container a img,
html:not(.theme-override-light) .header-logo-img,
html.theme-override-dark .header-logo-img,
html:not(.theme-override-light) .footer-image img,
html.theme-override-dark .footer-image img,
html:not(.theme-override-light) .footer-image svg path,
html.theme-override-dark .footer-image svg path {
  filter: brightness(1.1) saturate(1.05);
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-override-light) .flashcard-card-div {
    box-shadow: 3px 10px 40px 0px var(--color-button-border-accent);
  }
}
html.theme-override-dark .flashcard-card-div {
  box-shadow: 3px 10px 40px 0px var(--color-button-border-accent);
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-override-light) .levitate:hover,
  html:not(.theme-override-light) .levitate:focus {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
  }
}
html.theme-override-dark .levitate:hover,
html.theme-override-dark .levitate:focus {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}

/* Dark-friendly treatment for educational graphics */
@media (prefers-color-scheme: dark) {
  html:not(.theme-override-light) img[src*="/assets/pb-graphics/"] {
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    filter: var(--image-filter-dark);
  }

  html:not(.theme-override-light) img[src*="/assets/pb-graphics/"] + figcaption {
    color: var(--color-text-secondary);
  }

  html:not(.theme-override-light) .loading-gif {
    padding: 18px;
    border-radius: 18px;
    background: rgba(20, 22, 28, 0.92);
    border: 1px solid var(--color-border-muted);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
  }

  html:not(.theme-override-light) .loading-gif::before {
    border-top-color: rgba(138, 180, 255, 0.25);
    border-right-color: rgba(138, 180, 255, 0.55);
    border-bottom-color: var(--color-accent-primary);
  }
}

html.theme-override-dark img[src*="/assets/pb-graphics/"] {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  filter: var(--image-filter-dark);
}

html.theme-override-dark img[src*="/assets/pb-graphics/"] + figcaption {
  color: var(--color-text-secondary);
}

html.theme-override-dark .loading-gif {
  padding: 18px;
  border-radius: 18px;
  background: rgba(20, 22, 28, 0.92);
  border: 1px solid var(--color-border-muted);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
}

html.theme-override-dark .loading-gif::before {
  border-top-color: rgba(138, 180, 255, 0.25);
  border-right-color: rgba(138, 180, 255, 0.55);
  border-bottom-color: var(--color-accent-primary);
}