/* Theme-layer styles — edit this file to customize light and dark appearance. */
:root { color-scheme: light; }

/* The header toggle is available on every page, including mobile. */
.theme-toggle {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.theme-toggle:hover { border-color: var(--sea); transform: translateY(-1px); }
.theme-toggle:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }
html[data-theme="dark"] .theme-icon-sun { display: block; }
html[data-theme="dark"] .theme-icon-moon { display: none; }

/* Color tokens: all major surfaces and text swap without touching the curriculum. */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6f0f1;
  --ink-2: #d8e7eb;
  --muted: #aabdc2;
  --paper: #0b1720;
  --white: #152630;
  --line: #31454e;
  --sea: #5adac6;
  --sea-dark: #80e8d6;
  --mint: #183b3a;
  --amber: #f9cc81;
  --amber-dark: #f9cc81;
  --red: #ffa1a1;
  --shadow: 0 18px 50px rgba(0, 0, 0, .22);
}

/* Main cards, tables and learning panels. */
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .dashboard-panel,
html[data-theme="dark"] .week-panel,
html[data-theme="dark"] .roadmap-rows,
html[data-theme="dark"] .steps-grid > div,
html[data-theme="dark"] .phrase-card,
html[data-theme="dark"] .framework-card,
html[data-theme="dark"] .prompt-box,
html[data-theme="dark"] .time-list,
html[data-theme="dark"] .audio-card,
html[data-theme="dark"] .question-item,
html[data-theme="dark"] .vocab-list,
html[data-theme="dark"] .framework-box,
html[data-theme="dark"] .follow-card,
html[data-theme="dark"] .next-prev,
html[data-theme="dark"] .notes-field textarea,
html[data-theme="dark"] .score-grid select,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .searchbox { background: var(--white); color: var(--ink); border-color: var(--line); }

/* Interactive and low-emphasis surfaces. */
html[data-theme="dark"] .top-nav a { color: #bdd0d2; }
html[data-theme="dark"] .top-nav a:hover,
html[data-theme="dark"] .top-nav a.active,
html[data-theme="dark"] .side-day:hover,
html[data-theme="dark"] .side-day.current,
html[data-theme="dark"] .lesson-tile:hover,
html[data-theme="dark"] .roadmap-row:hover,
html[data-theme="dark"] .next-prev:hover,
html[data-theme="dark"] .question-item[open] summary { background: #21413e; color: var(--ink); }
html[data-theme="dark"] .side-day { color: #afc2c8; }
html[data-theme="dark"] .lesson-tile,
html[data-theme="dark"] .roadmap-row,
html[data-theme="dark"] .time-item,
html[data-theme="dark"] .vocab-row,
html[data-theme="dark"] .question-item[open] summary { border-color: var(--line); }
html[data-theme="dark"] .top-nav,
html[data-theme="dark"] .lesson-section { border-color: var(--line); }
html[data-theme="dark"] .sidebar-summary,
html[data-theme="dark"] .closing-section,
html[data-theme="dark"] .instruction-box,
html[data-theme="dark"] .answer-reveal,
html[data-theme="dark"] .criterion-box,
html[data-theme="dark"] .week-pill,
html[data-theme="dark"] .week-number,
html[data-theme="dark"] .audio-icon,
html[data-theme="dark"] .q-num { background: #1b3738; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .criterion-mark { background: #26534b; color: #98f4d9; }
html[data-theme="dark"] .progress-track,
html[data-theme="dark"] .time-meter { background: #2c4648; }
html[data-theme="dark"] .resource-section code { background: #294045; color: var(--ink); }

/* Respect the light foreground on colored panels and their CTA buttons. */
html[data-theme="dark"] .brand-mark { background: #27535a; color: #fff; }
html[data-theme="dark"] .home-hero { background: #122e37; }
html[data-theme="dark"] .lesson-hero { background: #18353e; }
html[data-theme="dark"] .practice-callout { background: #1c3941; color: #f2faf9; }
html[data-theme="dark"] .btn-dark { background: #2d545b; color: #f5fffd; }
html[data-theme="dark"] .btn-dark:hover { background: #3c666b; }
html[data-theme="dark"] .complete-btn { background: #224c52; border-color: #37616a; }
html[data-theme="dark"] .complete-btn[aria-pressed="true"] { background: #1d5244; border-color: #357660; color: #baf3de; }
html[data-theme="dark"] .week-english,
html[data-theme="dark"] .tile-arrow,
html[data-theme="dark"] .roadmap-arrow,
html[data-theme="dark"] .roadmap-row-status { color: #a5c0bf; }
html[data-theme="dark"] .tile-num,
html[data-theme="dark"] .side-day-num,
html[data-theme="dark"] .vocab-num,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .question-chevron,
html[data-theme="dark"] .saved-hint { color: #95bbb2; }
html[data-theme="dark"] .sample-answer,
html[data-theme="dark"] .framework-box p,
html[data-theme="dark"] .prompt-box p,
html[data-theme="dark"] .section-copy,
html[data-theme="dark"] .check-row { color: #c4d6d6; }
html[data-theme="dark"] .criterion-box p { color: #b0d1bf; }
html[data-theme="dark"] .searchbox input { color: var(--ink); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #8fa7ad; }
html[data-theme="dark"] .notes-field textarea,
html[data-theme="dark"] .score-grid select { color-scheme: dark; }

@media (max-width: 600px) {
  /* Header navigation wraps to line two; theme stays beside the brand. */
  .theme-toggle { order: 2; width: 40px; height: 40px; flex-basis: 40px; margin-left: auto; }
}
@media print {
  /* Printing remains on a white page regardless of active theme. */
  html[data-theme="dark"] { color-scheme: light; }
  html[data-theme="dark"] body { background: #fff; color: #111; }
  .theme-toggle { display: none !important; }
}