:root {
  --bg: #faf8f3;
  --bg-subtle: #f1ece1;
  --border: rgba(0,0,0,0.30);
  --fg: #1a1a1a;
  --fg-dim-base: #767066;
  --fg-muted: #55504a;
  --grade-almost: #b54708;
  --grade-fail: #b42318;
  --grade-perfect: #027a48;
  --graph-blue: #1d4ed8;
  --graph-ink: #1a1a1a;
  --highlight: #f5eab9;
  --radius: 0.375rem;
  --rule: rgba(0,0,0,0.50);
  --surface: #fffdf8;
}
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-subtle: #0a0a0a;
  --border: rgba(255,255,255,0.26);
  --fg: #ffffff;
  --fg-dim-base: #6b7280;
  --fg-muted: #9ca3af;
  --grade-almost: #fdb022;
  --grade-fail: #f97066;
  --grade-perfect: #47cd89;
  --graph-blue: #60a5fa;
  --graph-ink: #e5e7eb;
  --highlight: rgb(214 176 72 / 0.17);
  --radius: 0.375rem;
  --rule: rgba(255,255,255,0.36);
  --surface: #161616;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --bg: #000000;
  --bg-subtle: #0a0a0a;
  --border: rgba(255,255,255,0.26);
  --fg: #ffffff;
  --fg-dim-base: #6b7280;
  --fg-muted: #9ca3af;
  --grade-almost: #fdb022;
  --grade-fail: #f97066;
  --grade-perfect: #47cd89;
  --graph-blue: #60a5fa;
  --graph-ink: #e5e7eb;
  --highlight: rgb(214 176 72 / 0.17);
  --radius: 0.375rem;
  --rule: rgba(255,255,255,0.36);
  --surface: #161616;
  }
}