:root {
  --font-serif: "Newsreader Variable", Georgia, serif;
  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono Variable", ui-monospace, monospace;

  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #f1eee7;
  --surface-hover: #ebe7de;
  --border: #e4dfd4;
  --border-strong: #d3ccbe;
  --text: #1c1b19;
  --text-2: #57534b;
  --text-3: #8a857a;

  --brand: #3b4fd8;
  --brand-hover: #3243c4;
  --brand-soft: #e9ecfc;
  --brand-text: #2a3bb5;
  --on-brand: #ffffff;

  --socratic: #7c4ddb;
  --socratic-soft: #f1eafd;

  --success: #1f8a5b;
  --success-soft: #e3f4ec;
  --warning: #b7791f;
  --warning-soft: #fbf0dc;
  --danger: #c8384f;
  --danger-soft: #fbe6ea;

  --status-unseen: var(--text-3);
  --status-shaky: var(--warning);
  --status-solid: var(--success);
  --status-misconception: var(--danger);
  --status-teaching: var(--brand);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  --shadow-sm: 0 1px 2px rgb(28 27 25 / 0.05);
  --shadow-card: 0 1px 2px rgb(28 27 25 / 0.04), 0 6px 20px rgb(28 27 25 / 0.06);
  --shadow-pop: 0 2px 4px rgb(28 27 25 / 0.06), 0 16px 40px rgb(28 27 25 / 0.12);

  --focus-ring: 0 0 0 3px rgb(59 79 216 / 0.28);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

.dark {
  --bg: #121210;
  --surface: #1a1a17;
  --surface-2: #161613;
  --surface-hover: #22221e;
  --border: #2a2925;
  --border-strong: #3a3833;
  --text: #edeae3;
  --text-2: #b3aea3;
  --text-3: #7f7a70;

  --brand: #8c9bff;
  --brand-hover: #a3afff;
  --brand-soft: rgb(140 155 255 / 0.14);
  --brand-text: #aab5ff;
  --on-brand: #0f1233;

  --socratic: #b394f5;
  --socratic-soft: rgb(179 148 245 / 0.14);

  --success: #4cc38a;
  --success-soft: rgb(76 195 138 / 0.14);
  --warning: #e3a543;
  --warning-soft: rgb(227 165 67 / 0.14);
  --danger: #f0718a;
  --danger-soft: rgb(240 113 138 / 0.14);

  --shadow-sm: none;
  --shadow-card: 0 0 0 1px var(--border);
  --shadow-pop: 0 0 0 1px var(--border-strong), 0 16px 40px rgb(0 0 0 / 0.5);
  --focus-ring: 0 0 0 3px rgb(140 155 255 / 0.35);
}