*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Warm textbook palette */
  --bg: #f5f3ee;
  --surface: #faf8f3;
  --surface-2: #f1ede4;
  --paper-strip: #f3efe5;
  --border: #e5dfd0;
  --border-strong: #d5cdb8;
  --border-focus: #8a6e3a;

  /* Muted ink-brown primary */
  --primary: #6b5638;
  --primary-hover: #4f3f29;
  --primary-light: #efe9da;

  /* Subdued text */
  --text: #1a1a1a;
  --text-soft: #2c2a26;
  --text-muted: #6f6a5e;
  --text-light: #6c675c;

  /* Soft semantic colors */
  --correct: #4f7a3a;
  --correct-bg: #eef3e3;
  --correct-border: #c8d6a8;
  --wrong: #a64a3b;
  --wrong-bg: #f5e8e3;
  --wrong-border: #e0bcb1;

  /* Difficulty colors */
  --easy: #6b7d4a;
  --medium: #a87a3a;
  --hard: #a64a3b;

  /* Tag pastels */
  --tag-cat-fg: #5a4828;
  --tag-cat-bg: #ede4cf;
  --tag-cat-bd: #d8caa8;
  --tag-type-fg: #545b3a;
  --tag-type-bg: #ebead8;
  --tag-type-bd: #cdcdac;
  --tag-count-fg: #6f6a5e;
  --tag-count-bg: #efebe1;
  --tag-count-bd: #d8d2c0;
  --tag-source-fg: #6b5638;
  --tag-source-bg: #ede4cf;
  --tag-source-bd: #d8caa8;

  /* Partial grading */
  --partial: #a87a3a;
  --partial-bg: #f7f2ea;
  --partial-border: #d4b896;

  /* Reference type badges */
  --ref-theorem-bg: #e8dcc8;
  --ref-theorem-fg: #6b5638;
  --ref-definition-bg: #dde5d3;
  --ref-definition-fg: #4a5a3a;
  --ref-lemma-bg: #ede4cf;
  --ref-lemma-fg: #8a6e3a;
  --ref-proposition-bg: #eddbd2;
  --ref-proposition-fg: #9a4f3d;
  --ref-corollary-bg: #e9e2d6;
  --ref-corollary-fg: #79684e;

  /* Source link hover */
  --source-hover-bg: #d9e2e6;
  --source-hover-bd: #a8b8c0;

  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(80, 60, 30, 0.04), 0 2px 8px rgba(80, 60, 30, 0.05);
  --shadow-lg: 0 1px 3px rgba(80, 60, 30, 0.05), 0 6px 24px rgba(80, 60, 30, 0.07);

  --serif: 'Source Serif 4', 'Source Serif Pro', 'Charter', 'Georgia', 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ── Dark mode palette ── */
/* Activated by OS preference or .dark class on <html> */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --bg: #1a1917;
    --surface: #222120;
    --surface-2: #2a2927;
    --paper-strip: #252422;
    --border: #3a3835;
    --border-strong: #4a4742;
    --border-focus: #b8975a;

    --primary: #c9a86c;
    --primary-hover: #dfc08a;
    --primary-light: #2e2820;

    --text: #e5e2db;
    --text-soft: #d5d1c8;
    --text-muted: #9a9488;
    --text-light: #969084;

    --correct: #7aad5a;
    --correct-bg: #1e2a18;
    --correct-border: #3a5a2a;
    --wrong: #d06a5a;
    --wrong-bg: #2a1a18;
    --wrong-border: #5a3028;

    --easy: #8aa05a;
    --medium: #c89a5a;
    --hard: #d06a5a;

    --tag-cat-fg: #c9a86c;
    --tag-cat-bg: #2e2820;
    --tag-cat-bd: #4a3e2e;
    --tag-type-fg: #8aa05a;
    --tag-type-bg: #222818;
    --tag-type-bd: #3a4528;
    --tag-count-fg: #9a9488;
    --tag-count-bg: #2a2927;
    --tag-count-bd: #3a3835;
    --tag-source-fg: #c9a86c;
    --tag-source-bg: #2e2820;
    --tag-source-bd: #4a3e2e;

    --partial: #c89a5a;
    --partial-bg: #2a2418;
    --partial-border: #5a4a2e;

    --ref-theorem-bg: #2e2820;
    --ref-theorem-fg: #c9a86c;
    --ref-definition-bg: #222818;
    --ref-definition-fg: #8aa05a;
    --ref-lemma-bg: #2e2820;
    --ref-lemma-fg: #c89a5a;
    --ref-proposition-bg: #2e211d;
    --ref-proposition-fg: #cf8a70;
    --ref-corollary-bg: #2a2620;
    --ref-corollary-fg: #b3a284;

    --source-hover-bg: #2a2927;
    --source-hover-bd: #4a4742;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.2), 0 6px 24px rgba(0, 0, 0, 0.2);
  }
}

/* Manual dark mode override */
:root.dark {
  --bg: #1a1917;
  --surface: #222120;
  --surface-2: #2a2927;
  --paper-strip: #252422;
  --border: #3a3835;
  --border-strong: #4a4742;
  --border-focus: #b8975a;

  --primary: #c9a86c;
  --primary-hover: #dfc08a;
  --primary-light: #2e2820;

  --text: #e5e2db;
  --text-soft: #d5d1c8;
  --text-muted: #9a9488;
  --text-light: #969084;

  --correct: #7aad5a;
  --correct-bg: #1e2a18;
  --correct-border: #3a5a2a;
  --wrong: #d06a5a;
  --wrong-bg: #2a1a18;
  --wrong-border: #5a3028;

  --easy: #8aa05a;
  --medium: #c89a5a;
  --hard: #d06a5a;

  --tag-cat-fg: #c9a86c;
  --tag-cat-bg: #2e2820;
  --tag-cat-bd: #4a3e2e;
  --tag-type-fg: #8aa05a;
  --tag-type-bg: #222818;
  --tag-type-bd: #3a4528;
  --tag-count-fg: #9a9488;
  --tag-count-bg: #2a2927;
  --tag-count-bd: #3a3835;
  --tag-source-fg: #c9a86c;
  --tag-source-bg: #2e2820;
  --tag-source-bd: #4a3e2e;

  --partial: #c89a5a;
  --partial-bg: #2a2418;
  --partial-border: #5a4a2e;

  --ref-theorem-bg: #2e2820;
  --ref-theorem-fg: #c9a86c;
  --ref-definition-bg: #222818;
  --ref-definition-fg: #8aa05a;
  --ref-lemma-bg: #2e2820;
  --ref-lemma-fg: #c89a5a;
  --ref-proposition-bg: #2e211d;
  --ref-proposition-fg: #cf8a70;
  --ref-corollary-bg: #2a2620;
  --ref-corollary-fg: #b3a284;

  --source-hover-bg: #2a2927;
  --source-hover-bd: #4a4742;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1px 3px rgba(0, 0, 0, 0.2), 0 6px 24px rgba(0, 0, 0, 0.2);
}

/* ── Blueprint theme ── */
:root.blueprint {
  --serif: 'Share Tech Mono', monospace;
  --sans: 'Share Tech Mono', monospace;

  --bg: #0a1628;
  --surface: #0e1e38;
  --surface-2: #142848;
  --paper-strip: #122040;
  --border: #1e3a6a;
  --border-strong: #2a4a80;
  --border-focus: #6aaae8;

  --primary: #6aaae8;
  --primary-hover: #8ac0f0;
  --primary-light: #142848;

  --text: #c8daf0;
  --text-soft: #b0c8e8;
  --text-muted: #6888a8;
  --text-light: #7896b4;

  --correct: #58c878;
  --correct-bg: #0a2818;
  --correct-border: #2a5838;
  --wrong: #e86858;
  --wrong-bg: #280a0a;
  --wrong-border: #582828;

  --easy: #58c878;
  --medium: #e8c858;
  --hard: #e86858;

  --partial: #e8c858;
  --partial-bg: #1a1a08;
  --partial-border: #4a4828;

  --tag-cat-fg: #6aaae8;
  --tag-cat-bg: #142848;
  --tag-cat-bd: #2a4a80;
  --tag-type-fg: #58c878;
  --tag-type-bg: #0a2818;
  --tag-type-bd: #2a5838;
  --tag-count-fg: #6888a8;
  --tag-count-bg: #142848;
  --tag-count-bd: #1e3a6a;
  --tag-source-fg: #6aaae8;
  --tag-source-bg: #142848;
  --tag-source-bd: #2a4a80;

  --ref-theorem-bg: #142848;
  --ref-theorem-fg: #6aaae8;
  --ref-definition-bg: #0a2818;
  --ref-definition-fg: #58c878;
  --ref-lemma-bg: #142848;
  --ref-lemma-fg: #e8c858;
  --ref-proposition-bg: #2e1c10;
  --ref-proposition-fg: #e8985a;
  --ref-corollary-bg: #0c2830;
  --ref-corollary-fg: #58c8c8;

  --source-hover-bg: #142848;
  --source-hover-bd: #2a4a80;

  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 3px 10px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.35);
}

html, body {
  height: 100%;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}