:root {
  color-scheme: light;
  --ground: #EDE7DC;
  --surface: #F8F4EC;
  --raised: #E4DCCD;
  --ink: #302D27;
  --body: #575248;
  --muted: #70695E;
  --faint: #7D7467;
  --rule: #CFC5B5;
  --rule-soft: #E5DDCF;
  --accent: #365C4D;
  --accent-soft: #E1E8DC;
  --warm: #A46345;
  --warm-soft: #F0E2D4;
  --up: #647144;
  --down: #9B5344;
  --panel-shadow: 0 8px 28px rgb(65 49 28 / 4%);
  --inverse-ground: #304B40;
  --inverse-ink: #F4EFE4;
  --inverse-body: #CFD9CC;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #252720;
  --surface: #30332A;
  --raised: #393D31;
  --ink: #F1EBDD;
  --body: #D1CABA;
  --muted: #B9B19F;
  --faint: #A59D8E;
  --rule: #545647;
  --rule-soft: #424639;
  --accent: #B3C7AA;
  --accent-soft: #3C4A39;
  --warm: #DEAA83;
  --warm-soft: #4D3D30;
  --up: #B4C082;
  --down: #E39D87;
  --panel-shadow: none;
  --inverse-ground: #1C3027;
  --inverse-ink: #F4EFE4;
  --inverse-body: #CFD9CC;
}
:root {
  --student-color: var(--accent);
  --teacher-color: var(--warm);
  --font-serif: Newsreader, Georgia, serif;
  --font-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", monospace;
  --page-width: 1200px;
  --panel-radius: 14px;
  --panel-space: 36px;
}
@media (max-width: 600px) { :root { --panel-radius: 10px; --panel-space: 20px; } }