/* The original green and cream palette remains the default. */
:root {
  color-scheme: light;
  --theme-picker-bg: #edf1e8;
  --theme-picker-text: #52654c;
  --theme-picker-active: #173f35;
  --theme-picker-active-text: #fff;
}
theme-switcher { display: block; margin-top: 22px; }
.theme-label { color: var(--muted); font-size: 11px; margin-bottom: 8px; }
.theme-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; max-width: 250px; }
.theme-choice { min-width: 0; padding: 8px 3px; border: 1px solid transparent; border-radius: 7px; background: var(--theme-picker-bg); color: var(--theme-picker-text); font-size: 11px; line-height: 1.4; }
.theme-choice:hover { border-color: currentColor; }
.theme-choice[aria-pressed="true"] { background: var(--theme-picker-active); color: var(--theme-picker-active-text); border-color: currentColor; font-weight: 600; }
.mobile-theme-footer { display: none; }
.login-box theme-switcher { padding-top: 18px; border-top: 1px solid var(--line); }
.check-page>theme-switcher { max-width: 250px; margin: 26px auto 0; }
@media(min-width:851px) {
  .sidebar { overflow-y: auto; gap: 26px; }
  .sidebar-foot { padding-bottom: 2px; }
}
@media(max-width:850px) {
  .mobile-theme-footer { display: block; padding: 0 20px 24px; }
  .mobile-theme-footer theme-switcher { width: min(100%,250px); margin: 0 auto; }
}
@media(pointer:coarse) { .theme-choice { min-height: 44px; } }

/* Blue palette: navy navigation, pale work area and blue accents. */
:root[data-theme="navy"] {
  --page: #f3f6fa; --ink: #172e48; --surface: #fff; --soft: #eaf1f8;
  --green: #183d61; --muted: #5c6d80; --line: #dce4ed; --mint: #e2edf8; --lime: #b2d7fa; --white: #fff;
  --shadow: 0 14px 50px #10284418;
  --sidebar: #102844; --sidebar-text: #f3f7ff; --sidebar-muted: #bdcfe0; --nav-hover: #203d5a; --nav-active: #294b6d;
  --primary: #b2d7fa; --primary-hover: #9ac9f5; --primary-text: #102844;
  --hero-bg: #102844; --hero-text: #fff; --hero-muted: #bfd2e4; --hero-accent: #b2d7fa;
  --focus: #5186ba; --avatar: #dce8f3; --avatar-text: #274564;
  --input-border: #cbd8e5; --placeholder: #65778b; --empty-bg: #f8fafd;
  --notes-bg: #edf2fc; --notes-text: #233d66; --notes-border: #7c9dcd;
  --danger-bg: #fbe9e7; --danger-text: #9e3f38; --success-bg: #e4f1e9; --success-text: #376a4e;
  --warning-bg: #fbefda; --warning-text: #7e5a20; --neutral-bg: #e7edf7; --neutral-text: #435d83;
  --tile: #e2edf8; --tile-text: #214264; --tile-de: #dce8eb; --tile-de-text: #315d68; --tile-exam: #e9e8f4; --tile-exam-text: #615581;
  --theme-picker-bg: #203d5a; --theme-picker-text: #c8d9e9; --theme-picker-active: #b2d7fa; --theme-picker-active-text: #102844;
}

/* Dark palette for the application chrome and native learning content. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #101923; --ink: #e7eef6; --surface: #1b2937; --soft: #233545;
  --green: #b6d8f7; --muted: #a9bacb; --line: #354a5d; --mint: #263e52; --lime: #b6d8f7; --white: #1b2937;
  --shadow: 0 14px 50px #00000030;
  --sidebar: #111f2d; --sidebar-text: #edf3fa; --sidebar-muted: #b2c5d8; --nav-hover: #23384b; --nav-active: #2e4f6b;
  --primary: #b6d8f7; --primary-hover: #cee6fc; --primary-text: #142c43;
  --hero-bg: #1c354c; --hero-text: #f5f8fc; --hero-muted: #bbcede; --hero-accent: #b6d8f7;
  --focus: #b6d8f7; --avatar: #304b62; --avatar-text: #e3effa;
  --input-border: #496075; --placeholder: #9aafc1; --empty-bg: #182736;
  --notes-bg: #30323b; --notes-text: #ead6ae; --notes-border: #c5a46b;
  --danger-bg: #482d32; --danger-text: #ffb7ac; --success-bg: #243e35; --success-text: #b0dfbe;
  --warning-bg: #403727; --warning-text: #edd198; --neutral-bg: #293c54; --neutral-text: #bdd1f2;
  --tile: #263e52; --tile-text: #bfdbf5; --tile-de: #294347; --tile-de-text: #b5d8d7; --tile-exam: #39364d; --tile-exam-text: #d3c5ed;
  --theme-picker-bg: #25394b; --theme-picker-text: #c4d3e3; --theme-picker-active: #b6d8f7; --theme-picker-active-text: #142c43;
}

:root:is([data-theme="dark"],[data-theme="navy"]) { background: var(--page); color: var(--ink); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(button,a,input,textarea,select):focus-visible { outline-color: var(--focus); }
:root:is([data-theme="dark"],[data-theme="navy"]) .sidebar { background: var(--sidebar); color: var(--sidebar-text); border-color: var(--nav-hover); }
:root:is([data-theme="dark"],[data-theme="navy"]) .sidebar :is(.brand small,.aside-note,.profile small,.theme-label) { color: var(--sidebar-muted); }
:root:is([data-theme="dark"],[data-theme="navy"]) .sidebar .profile { border-color: #35506b; }
:root:is([data-theme="dark"],[data-theme="navy"]) .sidebar .link { color: var(--sidebar-muted); }
:root:is([data-theme="dark"],[data-theme="navy"]) .nav a { color: var(--sidebar-muted); }
:root:is([data-theme="dark"],[data-theme="navy"]) .nav a.active { background: var(--nav-active); color: #fff; box-shadow: inset 3px 0 var(--primary); }
:root:is([data-theme="dark"],[data-theme="navy"]) .nav a:hover:not(.active) { background: var(--nav-hover); }
:root:is([data-theme="dark"],[data-theme="navy"]) .avatar { background: var(--avatar); color: var(--avatar-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .sidebar .avatar { background: #33516e; color: #e6f2fc; }
:root:is([data-theme="dark"],[data-theme="navy"]) .btn { background: var(--primary); color: var(--primary-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .btn:hover { background: var(--primary-hover); }
:root:is([data-theme="dark"],[data-theme="navy"]) .btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root:is([data-theme="dark"],[data-theme="navy"]) .btn.secondary:hover { background: var(--soft); }
:root:is([data-theme="dark"],[data-theme="navy"]) .btn.light { background: var(--primary); color: var(--primary-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(.btn.danger,.error) { background: var(--danger-bg); color: var(--danger-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(.danger-text,.incorrect) { color: var(--danger-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .correct { color: var(--success-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .icon-btn:hover { background: var(--soft); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(.hero,.login-story) { background: var(--hero-bg); color: var(--hero-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(.hero p,.login-story p,.login-story footer,.login-story .brand small,.tagline) { color: var(--hero-muted); }
:root:is([data-theme="dark"],[data-theme="navy"]) .hero .eyebrow { color: var(--hero-accent); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(.stat,.card,.exercise,.check-columns>section) { background: var(--surface); box-shadow: none; }
:root:is([data-theme="dark"],[data-theme="navy"]) .pill { background: var(--soft); color: var(--ink); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(.pill.en,.pill.completed) { background: var(--success-bg); color: var(--success-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(.pill.de,.pill.submitted,.demo-badge) { background: var(--warning-bg); color: var(--warning-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .pill.revision { background: var(--danger-bg); color: var(--danger-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .pill.assigned { background: var(--neutral-bg); color: var(--neutral-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .course-tile { background: var(--tile); }
:root:is([data-theme="dark"],[data-theme="navy"]) .course-monogram { color: var(--tile-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .course-tile.de { background: var(--tile-de); }
:root:is([data-theme="dark"],[data-theme="navy"]) .course-tile.de .course-monogram { color: var(--tile-de-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .course-tile.exam { background: var(--tile-exam); }
:root:is([data-theme="dark"],[data-theme="navy"]) .course-tile.exam .course-monogram { color: var(--tile-exam-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(input,select,textarea,.editor-block textarea) { background: var(--surface); color: var(--ink); border-color: var(--input-border); }
:root:is([data-theme="dark"],[data-theme="navy"]) ::placeholder { color: var(--placeholder); opacity: 1; }
:root:is([data-theme="dark"],[data-theme="navy"]) .empty { background: var(--empty-bg); border-color: var(--line); }
:root:is([data-theme="dark"],[data-theme="navy"]) :is(.date-square,.notice,.editor-top-actions,.flashcard,.chat-message,.credential,.room-tabs) { background: var(--soft); }
:root:is([data-theme="dark"],[data-theme="navy"]) dialog { background: var(--surface); color: var(--ink); }
:root:is([data-theme="dark"],[data-theme="navy"]) dialog::backdrop { background: #08152299; }
:root:is([data-theme="dark"],[data-theme="navy"]) .editor-block { background: var(--page); }
:root:is([data-theme="dark"],[data-theme="navy"]) .answer-key { color: var(--notes-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) #toast { background: var(--primary); color: var(--primary-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .room-tabs button { color: var(--muted); }
:root:is([data-theme="dark"],[data-theme="navy"]) .room-tabs button.active { background: var(--surface); color: var(--ink); box-shadow: none; }
:root:is([data-theme="dark"],[data-theme="navy"]) .video-wrap { background: var(--hero-bg); }
:root:is([data-theme="dark"],[data-theme="navy"]) .video-placeholder { color: var(--hero-muted); }
:root:is([data-theme="dark"],[data-theme="navy"]) .video-label { background: #102844cc; }
:root:is([data-theme="dark"],[data-theme="navy"]) .chat-message strong { color: var(--muted); }
:root:is([data-theme="dark"],[data-theme="navy"]) .word-card .translation { color: var(--muted); }
:root:is([data-theme="dark"],[data-theme="navy"]) .teacher-notes { background: var(--notes-bg); color: var(--notes-text); border-color: var(--notes-border); }
:root:is([data-theme="dark"],[data-theme="navy"]) .teacher-notes strong { color: var(--notes-text); }
:root:is([data-theme="dark"],[data-theme="navy"]) .present-controls { background: var(--page); }
:root:is([data-theme="dark"],[data-theme="navy"]) .check-page { background: var(--page); }
/* Scope illustration colors to our decorative art, never to imported slides. */
:root:is([data-theme="dark"],[data-theme="navy"]) .hero-art [fill="#275646"] { fill: #294b6a; }
:root:is([data-theme="dark"],[data-theme="navy"]) .hero-art [fill="#acbe93"] { fill: #7295b3; }
:root:is([data-theme="dark"],[data-theme="navy"]) .hero-art [fill="#d7e6b9"] { fill: #aacce9; }
:root:is([data-theme="dark"],[data-theme="navy"]) .hero-art [fill="#e6efce"] { fill: #d5e7f5; }
:root:is([data-theme="dark"],[data-theme="navy"]) .hero-art [fill="#d7eea9"] { fill: #b2d7fa; }
:root:is([data-theme="dark"],[data-theme="navy"]) .hero-art [stroke="#739369"] { stroke: #567fa1; }
:root[data-theme="navy"] .brand img { content: url('/mark-blue.svg'); }
:root[data-theme="dark"] .brand img { content: url('/mark-blue.svg'); }
@media(max-width:850px) {
  :root:is([data-theme="dark"],[data-theme="navy"]) .mobile-theme-footer { background: var(--page); }
}
@media(max-height:800px) and (min-width:851px) {
  .sidebar { padding-top:20px; gap:18px; }
  .sidebar-foot>.aside-note { display:none; }
  .nav a { padding-top:10px; padding-bottom:10px; }
}