/* Solvable — generated from design-system/tokens.json by scripts/build.mjs */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/BricolageGrotesque-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/SourceSerif4-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/SourceSerif4-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/Caveat-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --paper: #F2F5F1;
  --paper-raised: #FFFFFF;
  --grid: #CFDFD8;
  --ink: #14243A;
  --ink-muted: #4F5D6B;
  --pen: #2347C5;
  --pen-soft: #E3E9FB;
  --on-pen: #FFFFFF;
  --highlight: #F5D547;
  --on-highlight: #14243A;
  --solved: #1F7A55;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-12: 48px;
  --grid-cell: 24px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-full: 9999px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0F1820;
    --paper-raised: #16222C;
    --grid: #243440;
    --ink: #E6EDEF;
    --ink-muted: #9EB0BB;
    --pen: #93ABFF;
    --pen-soft: #1C2752;
    --on-pen: #0F1820;
    --highlight: #E9C93D;
    --on-highlight: #14243A;
    --solved: #62D2A2;
  }
}
:root[data-theme="dark"] {
  --paper: #0F1820;
  --paper-raised: #16222C;
  --grid: #243440;
  --ink: #E6EDEF;
  --ink-muted: #9EB0BB;
  --pen: #93ABFF;
  --pen-soft: #1C2752;
  --on-pen: #0F1820;
  --highlight: #E9C93D;
  --on-highlight: #14243A;
  --solved: #62D2A2;
}