:root {
  color-scheme: light;
  --paper: #ffffff;
  --card: #ffffff;
  --surface: #ffffff;
  --subtle: #f5f5f5;
  --hover: #eeeeee;
  --ink: #202020;
  --muted: #626262;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626262' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --line: #dedede;
  --line-strong: #8c8c8c;
  --on-primary: #ffffff;
  --link: #1759aa;
  --focus: #1759aa;
  --selected: #eeeeee;
  --selected-border: #b5b5b5;
  --danger: #9f2d24;
  --danger-bg: #fff1f0;
  --danger-border: #d79a93;
  --success: #23643b;
  --success-bg: #edf7ef;
  --success-border: #a7ccb0;
  --warning: #78510e;
  --warning-bg: #fff6df;
  --warning-border: #c2a156;
  --code-bg: #f4f4f4;
  --code-border: #c2c2c2;
  --syntax-comment: #626262;
  --syntax-keyword: #8547a5;
  --syntax-string: #216638;
  --syntax-property: #15569c;
  --syntax-number: #a0441c;
  --syntax-function: #7b4213;
  --syntax-selector: #8b305e;
  --syntax-punctuation: #44566b;
  --week-shadow: #202020;
  --popup-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  --backdrop: rgb(0 0 0 / 45%);
  --radius: 20px;
  --coral: #ff795f;
  --blue: #72a7ff;
  --acid: #d7ff4f;
  --violet: #bd9cff;
  --sand: #e7c87e;
  --accent-ink: #202020;
  --on-accent-ink: #ffffff;
  --section-bg: #f5f5f5;
  --popover-bg: #ffffff;
  --course-accent: var(--acid);
  --course-tint: color-mix(in srgb, var(--course-accent) 14%, var(--surface));
  --course-edge: color-mix(in srgb, var(--course-accent) 45%, var(--line));
  --blue-panel: color-mix(in srgb, var(--blue) 14%, var(--surface));
  --card-shadow: 0 6px 22px rgb(0 0 0 / 5%);
  --nav-bg: #f5f5f5;
  --nav-surface: #ffffff;
  --nav-hover: #eeeeee;
  --nav-ink: #202020;
  --nav-muted: #626262;
  --nav-line: #dedede;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #181818;
  --card: #242424;
  --surface: #242424;
  --subtle: #2b2b2b;
  --hover: #333333;
  --ink: #ededed;
  --muted: #b3b3b3;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --line: #414141;
  --line-strong: #818181;
  --on-primary: #181818;
  --link: #9ac1ff;
  --focus: #a9cbff;
  --selected: #333333;
  --selected-border: #737373;
  --danger: #ffb4ab;
  --danger-bg: #38201f;
  --danger-border: #975650;
  --success: #9bdfad;
  --success-bg: #1a3023;
  --success-border: #467c53;
  --warning: #e9c66b;
  --warning-bg: #342b17;
  --warning-border: #8f783e;
  --code-bg: #202020;
  --code-border: #525252;
  --syntax-comment: #b3b3b3;
  --syntax-keyword: #d6b4ff;
  --syntax-string: #afe29b;
  --syntax-property: #9dcbff;
  --syntax-number: #ffc18a;
  --syntax-function: #ffd580;
  --syntax-selector: #ffb4ce;
  --syntax-punctuation: #c4c4c4;
  --week-shadow: #444444;
  --popup-shadow: 0 8px 24px rgb(0 0 0 / 35%);
  --backdrop: rgb(0 0 0 / 65%);
  --card-shadow: 0 6px 22px rgb(0 0 0 / 15%);
  --section-bg: #202020;
  --popover-bg: #2b2b2b;
  --blue-panel: #202020;
  --nav-bg: #202020;
  --nav-surface: #242424;
  --nav-hover: #333333;
  --nav-ink: #ededed;
  --nav-muted: #b3b3b3;
  --nav-line: #414141;
}

html, body { background: var(--paper); color: var(--ink); }
input, select, textarea { color: var(--ink); background-color: var(--surface); accent-color: var(--link); }
/* A single chevron for native dropdowns and custom answer pickers. */
select:not([multiple]):not([size]), select:not([multiple])[size="1"] {
  appearance: none;
  padding-inline-end: 38px;
  background-image: var(--select-chevron);
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
}
select.error:not([multiple]):not([size]), select.error:not([multiple])[size="1"] {
  background-image: var(--select-chevron) !important;
}
.select-chevron {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: var(--select-chevron) center / 16px 16px no-repeat;
}
@media (forced-colors: active) {
  select:not([multiple]):not([size]), select:not([multiple])[size="1"] { appearance: auto; background-image: none !important; }
  .select-chevron { background: CanvasText; mask: var(--select-chevron) center / contain no-repeat; }
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
[data-theme="dark"] .theme-toggle .theme-moon { display: none; }

.answer-select-menu, .review-dialog, .roster-menu-panel { box-shadow: var(--popup-shadow); }
.eyebrow, .section-kicker, .reader-kind, .course-eyebrow { letter-spacing: normal; text-transform: none; }
.search-field:focus-within, .course-search:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }