/* OER Fit: English shared color-theme layer.
   Light mode preserves each page's existing design. Dark mode overrides shared surfaces only. */

:root {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-page: #0b1220;
  --theme-surface: #121c2d;
  --theme-surface-2: #18253a;
  --theme-surface-3: #20304a;
  --theme-text: #edf3fb;
  --theme-muted: #bcc8d8;
  --theme-border: #3b4d68;
  --theme-link: #9fc6ff;
  --theme-heading: #f6f9ff;
  --theme-gold: #ffd86a;
  --theme-blue: #77a9f7;
}

/* Theme control */
.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}
.theme-label {
  font-size: .82rem;
  font-weight: 800;
  color: #344457;
}
.theme-select {
  min-height: 44px;
  padding: 8px 34px 8px 12px;
  border: 1px solid #b8c5d4;
  border-radius: 10px;
  background: #ffffff;
  color: #17304f;
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
}
.theme-select:focus-visible {
  outline: 3px solid #111827;
  outline-offset: 3px;
}

@media (max-width: 920px) {
  .theme-control {
    margin-left: 0;
  }
}

/* Core dark surfaces */
html[data-theme="dark"] body {
  background: var(--theme-page) !important;
  color: var(--theme-text) !important;
}
html[data-theme="dark"] :where(main, .page, .page-shell, .content, .content-wrap) {
  color: var(--theme-text);
}
html[data-theme="dark"] :where(p, li, dt, dd, label, legend, figcaption, .section-lead, .small, .muted, .meta, .helper, .hint) {
  color: inherit;
}
html[data-theme="dark"] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--theme-heading) !important;
}
html[data-theme="dark"] a:not(.button):not(.btn) {
  color: var(--theme-link);
}

/* Header / navigation */
html[data-theme="dark"] .site-header,
html[data-theme="dark"] header.site-header {
  background: #0f1928 !important;
  color: var(--theme-text) !important;
  border-bottom-color: var(--theme-border) !important;
}
html[data-theme="dark"] :where(.header-inner, .topbar) {
  background: transparent !important;
}
html[data-theme="dark"] .brand,
html[data-theme="dark"] .brand-edition,
html[data-theme="dark"] .site-nav a,
html[data-theme="dark"] .nav a {
  color: #f5f8fd !important;
}
html[data-theme="dark"] .brand-edition {
  border-left-color: var(--theme-border) !important;
}
html[data-theme="dark"] .brand img {
  background: #f8fbff;
  border-radius: 10px;
  padding: 2px;
}
html[data-theme="dark"] .site-nav a:hover,
html[data-theme="dark"] .site-nav a:focus,
html[data-theme="dark"] .site-nav a:focus-visible,
html[data-theme="dark"] .site-nav a[aria-current="page"],
html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a:focus-visible,
html[data-theme="dark"] .nav a[aria-current="page"] {
  color: #ffffff !important;
  border-bottom-color: var(--theme-gold) !important;
}
html[data-theme="dark"] .theme-label {
  color: var(--theme-muted);
}
html[data-theme="dark"] .theme-select {
  background: #162338;
  color: #f4f8ff;
  border-color: #526783;
}
html[data-theme="dark"] .theme-select:focus-visible {
  outline-color: var(--theme-gold);
}

/* Shared light cards / panels */
html[data-theme="dark"] :where(
  .card,
  .section,
  .toolbar,
  .panel,
  .lead-card,
  .quick-summary,
  .snapshot,
  .quick-card,
  .access-card,
  .source-box,
  .resource-card,
  .oer-card,
  .reader-card,
  .criterion-card,
  .rubric-card,
  .template,
  .callout,
  .notice,
  .note,
  details,
  dialog
) {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] :where(.snapshot, .quick-card, .access-card, .source-box, .callout, .notice, .note) {
  background: var(--theme-surface-2) !important;
}
html[data-theme="dark"] :where(.card, .section, .panel, .template, .criterion-card, .rubric-card) :where(p, li, td, th, span, div) {
  border-color: var(--theme-border);
}

/* Major informational heroes */
html[data-theme="dark"] body > .hero,
html[data-theme="dark"] body:has(#reader-grid) .hero,
html[data-theme="dark"] body:has(.hero-wrap) .hero-wrap .hero,
html[data-theme="dark"] .hero-wrap .hero {
  background: #14233a !important;
  color: var(--theme-text) !important;
  border-color: #334b6a !important;
}
html[data-theme="dark"] body > .hero h1,
html[data-theme="dark"] body:has(#reader-grid) .hero h1,
html[data-theme="dark"] body:has(.hero-wrap) .hero-wrap h1,
html[data-theme="dark"] .hero-wrap .hero h1 {
  color: #f5f8ff !important;
}
html[data-theme="dark"] body > .hero .eyebrow,
html[data-theme="dark"] body:has(#reader-grid) .hero .eyebrow,
html[data-theme="dark"] body:has(.hero-wrap) .hero-wrap .eyebrow,
html[data-theme="dark"] .hero-wrap .hero .eyebrow {
  color: var(--theme-gold) !important;
}
html[data-theme="dark"] body > .hero p:not(.eyebrow),
html[data-theme="dark"] body:has(#reader-grid) .hero p:not(.eyebrow),
html[data-theme="dark"] body:has(.hero-wrap) .hero-wrap .hero p:last-child,
html[data-theme="dark"] .hero-wrap .hero p {
  color: var(--theme-text) !important;
}

/* Course/adoption-guide gradient heroes already work well dark; deepen them slightly. */
html[data-theme="dark"] main > .hero:not(:where(body > .hero)),
html[data-theme="dark"] main .hero {
  border-color: #35547a !important;
}
html[data-theme="dark"] main .hero .byline,
html[data-theme="dark"] main .hero .hero-lead {
  color: #e6edf8 !important;
}

/* Buttons */
html[data-theme="dark"] :where(.button, .btn, button) {
  border-color: #7694bd;
}
html[data-theme="dark"] :where(.button.secondary, .btn.secondary) {
  background: transparent !important;
  color: #f5f8ff !important;
}
html[data-theme="dark"] :where(.button.primary, .btn.primary) {
  background: #e9f1ff !important;
  color: #0b2b54 !important;
  border-color: #e9f1ff !important;
}

/* Forms */
html[data-theme="dark"] :where(input, textarea, select) {
  background: #101b2c;
  color: var(--theme-text);
  border-color: #536782;
}
html[data-theme="dark"] :where(input, textarea)::placeholder {
  color: #9aabc1;
}
html[data-theme="dark"] :where(input, textarea, select):focus-visible {
  outline-color: var(--theme-gold) !important;
}

/* Tables */
html[data-theme="dark"] :where(.table-wrap, table) {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="dark"] :where(th, td) {
  border-color: var(--theme-border) !important;
}
html[data-theme="dark"] :where(tbody th, tbody td) {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}
html[data-theme="dark"] thead th {
  background: #17355f !important;
  color: #ffffff !important;
}

/* Full Review / modal surfaces */
html[data-theme="dark"] :where(
  .modal,
  .modal-content,
  .dialog-content,
  .content-review-dialog,
  .content-review-modal,
  .content-review-panel,
  .review-dialog,
  .review-panel
) {
  color: var(--theme-text) !important;
}
html[data-theme="dark"] :where(
  .modal-content,
  .dialog-content,
  .content-review-dialog,
  .content-review-modal,
  .content-review-panel,
  .review-dialog,
  .review-panel
) {
  background: var(--theme-surface) !important;
  border-color: var(--theme-border) !important;
}
html[data-theme="dark"] ::backdrop {
  background: rgba(1, 7, 16, .78);
}

/* Readings filter taxonomy remains color-coded without relying on color alone. */
html[data-theme="dark"] .toolbar {
  background: #121c2d !important;
  border-color: var(--theme-border) !important;
  border-top-color: var(--theme-gold) !important;
}
html[data-theme="dark"] .toolbar .filter-button[data-course],
html[data-theme="dark"] .toolbar .filter-button[data-kind="all"]:not(.active),
html[data-theme="dark"] .toolbar .filter-button[data-collection="all"]:not(.active) {
  background: #142a46;
  border-color: #5d7fa9;
  color: #d6e6ff;
}
html[data-theme="dark"] .toolbar .filter-button[data-kind="nonfiction"] {
  background: #173326;
  border-color: #57836b;
  color: #d0efdc;
}
html[data-theme="dark"] .toolbar .filter-button[data-kind="literature"] {
  background: #2b2240;
  border-color: #806ca0;
  color: #e3d6fb;
}
html[data-theme="dark"] .toolbar .filter-button[data-kind="primary"] {
  background: #3a3016;
  border-color: #9b8234;
  color: #ffeab0;
}
html[data-theme="dark"] .toolbar .filter-button[data-collection="curated"] {
  background: #123437;
  border-color: #4f8b8a;
  color: #c4efed;
}
html[data-theme="dark"] .toolbar .filter-button[data-collection="library"] {
  background: #3a2030;
  border-color: #9d6480;
  color: #f4cedf;
}
html[data-theme="dark"] .toolbar .filter-button[data-collection="archive"] {
  background: #3a2619;
  border-color: #9e6a48;
  color: #f1c9ac;
}
html[data-theme="dark"] .toolbar .filter-button.active {
  box-shadow: 0 0 0 2px #f6f9ff inset;
}

html[data-theme="dark"] #reader-grid .tag-course { background: #142a46; color: #d6e6ff; }
html[data-theme="dark"] #reader-grid .tag-nonfiction { background: #173326; color: #d0efdc; }
html[data-theme="dark"] #reader-grid .tag-literature { background: #2b2240; color: #e3d6fb; }
html[data-theme="dark"] #reader-grid .tag-primary { background: #3a3016; color: #ffeab0; }
html[data-theme="dark"] #reader-grid .tag-use-curated { background: #123437; color: #c4efed; }
html[data-theme="dark"] #reader-grid .tag-use-library { background: #3a2030; color: #f4cedf; }
html[data-theme="dark"] #reader-grid .tag-use-archive { background: #3a2619; color: #f1c9ac; }

/* Footer */
html[data-theme="dark"] footer {
  background: #07101d !important;
  color: #d7e2f0 !important;
  border-top: 1px solid #2e405a;
}
html[data-theme="dark"] footer a {
  color: #ffffff !important;
}

/* Skip links and accessibility states */
html[data-theme="dark"] .skip-link {
  background: #ffffff !important;
  color: #000000 !important;
}
html[data-theme="dark"] :where(a, button, input, select, textarea, summary):focus-visible {
  outline-color: var(--theme-gold) !important;
  box-shadow: 0 0 0 5px #07101d !important;
}

@media (forced-colors: active) {
  .theme-select,
  html[data-theme="dark"] .theme-select {
    forced-color-adjust: auto;
  }
}

/* Theme coverage extensions for legacy page-specific components. */
html[data-theme="dark"] :where(
  [class*="-card"],
  .browse-bar,
  .broader,
  .rights-guide,
  .workflow,
  .quick-help,
  .privacy-section,
  .fit-body,
  .faculty-area,
  .faculty-note,
  .review-meta,
  .criterion-review,
  .compare-table-wrap
) {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  border-color: var(--theme-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :where([class*="-summary"], .review-meta, .faculty-area, .quick-help) {
  background: var(--theme-surface-2) !important;
}

html[data-theme="dark"] :where(.section-band) {
  background: #0e1a2a !important;
  border-color: #293b55 !important;
}
html[data-theme="dark"] .section-band.teal {
  background: #102322 !important;
  border-color: #31514f !important;
}

html[data-theme="dark"] :where(
  .workflow-line span:not(.arrow),
  .compare-chip,
  .quick-help-links a
) {
  background: var(--theme-surface-2) !important;
  color: var(--theme-text) !important;
  border-color: #5b7394 !important;
}

html[data-theme="dark"] :where(
  .course-code,
  .path-label,
  .discovery-label,
  .results-status,
  .browse-help summary,
  .faculty-review-button,
  .faculty-notes-details summary,
  .card-secondary-actions a,
  .compare-toggle,
  .clear-filters
) {
  color: #a9ccff !important;
}
html[data-theme="dark"] .course-code {
  border-bottom-color: var(--theme-gold) !important;
}
html[data-theme="dark"] :where(
  .course-note,
  .meta-line,
  .byline,
  .why-standout,
  .toolbar-intro,
  .discovery-intro,
  .rights-note,
  .rights-note-inline,
  .compare-score-label
) {
  color: var(--theme-muted) !important;
}
html[data-theme="dark"] strong {
  color: #f6f9ff;
}

/* Course-page controls */
html[data-theme="dark"] .browse-bar {
  border-top-color: var(--theme-gold) !important;
}
html[data-theme="dark"] .filter-button:not(.active):not([aria-pressed="true"]) {
  background: #162338 !important;
  color: #dce9fb !important;
  border-color: #607896 !important;
}
html[data-theme="dark"] .filter-button.active,
html[data-theme="dark"] .filter-button[aria-pressed="true"] {
  background: #28558d !important;
  color: #ffffff !important;
  border-color: #7eabe2 !important;
}
html[data-theme="dark"] :where(.button-primary, .course-button) {
  background: #28558d !important;
  color: #ffffff !important;
  border-color: #7eabe2 !important;
}
html[data-theme="dark"] :where(.button-secondary, .full-review-button) {
  background: var(--theme-surface-2) !important;
  color: #dce9fb !important;
  border-color: #7296c2 !important;
}
html[data-theme="dark"] .adoption-guide-button {
  background: #d9b94a !important;
  color: #201800 !important;
  border-color: #f0d66d !important;
}
html[data-theme="dark"] .compare-toggle[aria-pressed="true"] {
  color: #ffe49a !important;
}

/* Course metadata and review chips */
html[data-theme="dark"] .badge-featured { background: #3a3016 !important; color: #ffeab0 !important; }
html[data-theme="dark"] .badge-primary { background: #173326 !important; color: #d0efdc !important; }
html[data-theme="dark"] .badge-supplement { background: #142a46 !important; color: #d6e6ff !important; }
html[data-theme="dark"] .badge-reader { background: #2b2240 !important; color: #e3d6fb !important; }
html[data-theme="dark"] .rating-chip { background: #173326 !important; color: #d0efdc !important; }
html[data-theme="dark"] .dots,
html[data-theme="dark"] .compare-score-dots { color: #9fc6ff !important; }
html[data-theme="dark"] .compare-table caption { background: #3a3016 !important; color: #ffeab0 !important; }

/* Readings rights key */
html[data-theme="dark"] .tag-rights-open { background:#173326 !important; color:#d0efdc !important; border-color:#57836b !important; }
html[data-theme="dark"] .tag-rights-nd { background:#2b2240 !important; color:#e3d6fb !important; border-color:#806ca0 !important; }
html[data-theme="dark"] .tag-rights-free { background:#142a46 !important; color:#d6e6ff !important; border-color:#5d7fa9 !important; }
html[data-theme="dark"] .tag-rights-varies { background:#3a3016 !important; color:#ffeab0 !important; border-color:#9b8234 !important; }
html[data-theme="dark"] .rights-note-inline strong { color:#f6f9ff !important; }

/* Decorative assets need a little lift against dark surfaces. */
html[data-theme="dark"] :where(.ruler-rule, .fit-icon, .template-icon, .visual-divider img) {
  filter: brightness(1.18) contrast(1.02);
}

/* Final page-context corrections. */
html[data-theme="dark"] main > .hero,
html[data-theme="dark"] main .hero {
  background: #14233a !important;
  color: var(--theme-text) !important;
  border-color: #35547a !important;
}
html[data-theme="dark"] main .hero :where(h1, h2, h3, .hero-subtitle, .hero-copy, .hero-lead, .byline) {
  color: #f5f8ff !important;
}
html[data-theme="dark"] main .hero .eyebrow {
  color: var(--theme-gold) !important;
}

/* Home keeps its broad layout sections visually open in dark mode. */
html[data-theme="dark"] body:has(.course-grid) :where(.section, .note) {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] body:has(.course-grid) .replicate-box {
  background: #0f2b52 !important;
  border-color: #3a5f91 !important;
}