/* Chalk design tokens — generated from tokens.json. Themes: dark, light (default: dark).
   Switch theme with <html data-theme="light">. */
:root, [data-theme="dark"] {
  --board: #213128;
  --board-deep: #18241d;
  --board-raised: #2a3c32;
  --chalk: #f3f0e6;
  --chalk-soft: #b6c3b8;
  --line: #55695d;
  --dust: #f3f0e61f;
  --pink: #f2a7b9;
  --sky: #93cdee;
  --lemon: #f3df7a;
  --mint: #9fe0be;
  --on-tone: #1b2620;
  --ink: #1b2620;
  --ink-soft: #46524a;
  --note-lemon: #fbe98c;
  --note-pink: #f9c6d2;
  --note-sky: #c4e4f7;
  --note-mint: #c8efd9;
  --shadow-tray: inset 0 2px 0 #0000004d;
  --shadow-note: 0 1px 1px #00000040, 0 8px 14px -8px #000000b3;
  --shadow-lift: 0 2px 2px #00000040, 0 16px 22px -10px #000000b3;
  --shadow-pin: 1px 2px 1px #00000066;
  --shadow-modal: 0 30px 60px -20px #000000cc;
  color-scheme: dark;
}
[data-theme="light"] {
  --board: #f6f6f1;
  --board-deep: #e6e8e2;
  --board-raised: #ffffff;
  --chalk: #1d2731;
  --chalk-soft: #4e5a64;
  --line: #bcc3c7;
  --dust: #1d273112;
  --pink: #c3244c;
  --sky: #1d5cbc;
  --lemon: #9b5a00;
  --mint: #17734a;
  --on-tone: #ffffff;
  --ink: #1b2620;
  --ink-soft: #46524a;
  --note-lemon: #fbe98c;
  --note-pink: #f9c6d2;
  --note-sky: #c4e4f7;
  --note-mint: #c8efd9;
  --shadow-tray: inset 0 1px 0 #1d27311f;
  --shadow-note: 0 1px 1px #1d27311f, 0 8px 14px -8px #1d273166;
  --shadow-lift: 0 2px 2px #1d27311f, 0 16px 22px -10px #1d273166;
  --shadow-pin: 1px 2px 1px #1d273140;
  --shadow-modal: 0 30px 60px -24px #1d273173;
  color-scheme: light;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-note: 2px;
  --radius-full: 9999px;
  --font-display: "Cabin Sketch", "Chalkboard SE", "Comic Sans MS", cursive;
  --font-body: "Patrick Hand", "Chalkboard SE", "Segoe Print", ui-rounded, system-ui, sans-serif;
  --font-note: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --type-display-family: var(--font-display);
  --type-display-size: 56px;
  --type-display-line: 60px;
  --type-display-weight: 700;
  --type-title-family: var(--font-display);
  --type-title-size: 36px;
  --type-title-line: 42px;
  --type-title-weight: 700;
  --type-heading-family: var(--font-display);
  --type-heading-size: 24px;
  --type-heading-line: 30px;
  --type-heading-weight: 700;
  --type-body-family: var(--font-body);
  --type-body-size: 18px;
  --type-body-line: 26px;
  --type-body-weight: 400;
  --type-ui-family: var(--font-body);
  --type-ui-size: 17px;
  --type-ui-line: 22px;
  --type-ui-weight: 400;
  --type-small-family: var(--font-body);
  --type-small-size: 15px;
  --type-small-line: 20px;
  --type-small-weight: 400;
  --type-overline-family: var(--font-body);
  --type-overline-size: 13px;
  --type-overline-line: 16px;
  --type-overline-weight: 400;
  --type-overline-tracking: 0.12em;
  --type-note-family: var(--font-note);
  --type-note-size: 24px;
  --type-note-line: 26px;
  --type-note-weight: 600;
}
/* Type styles as utility classes (optional) */
.type-display { font-family: var(--type-display-family); font-size: var(--type-display-size); line-height: var(--type-display-line); font-weight: var(--type-display-weight); }
.type-title { font-family: var(--type-title-family); font-size: var(--type-title-size); line-height: var(--type-title-line); font-weight: var(--type-title-weight); }
.type-heading { font-family: var(--type-heading-family); font-size: var(--type-heading-size); line-height: var(--type-heading-line); font-weight: var(--type-heading-weight); }
.type-body { font-family: var(--type-body-family); font-size: var(--type-body-size); line-height: var(--type-body-line); font-weight: var(--type-body-weight); }
.type-ui { font-family: var(--type-ui-family); font-size: var(--type-ui-size); line-height: var(--type-ui-line); font-weight: var(--type-ui-weight); }
.type-small { font-family: var(--type-small-family); font-size: var(--type-small-size); line-height: var(--type-small-line); font-weight: var(--type-small-weight); }
.type-overline { font-family: var(--type-overline-family); font-size: var(--type-overline-size); line-height: var(--type-overline-line); font-weight: var(--type-overline-weight); letter-spacing: var(--type-overline-tracking); }
.type-note { font-family: var(--type-note-family); font-size: var(--type-note-size); line-height: var(--type-note-line); font-weight: var(--type-note-weight); }