/* Kapow design tokens — generated from tokens.json. Themes: light, dark (default: light).
   Switch theme with <html data-theme="dark">. */
:root, [data-theme="light"] {
  --page: #f2e3bd;
  --page-dot: #d8dcc6;
  --page-ink: #16130f;
  --page-ink-soft: #5b5247;
  --paper: #fffcf2;
  --paper-sunk: #f1e7cc;
  --ink: #16130f;
  --ink-soft: #5b5247;
  --drop: #16130f;
  --yellow: #ffd21f;
  --red: #de2a1f;
  --blue: #1f4fd6;
  --green: #33c25e;
  --pink: #ff74ba;
  --flash: #ffffff;
  --focus: #1f4fd6;
  --shadow-sm: 3px 3px 0 #16130f;
  --shadow-md: 5px 5px 0 #16130f;
  --shadow-lg: 8px 8px 0 #16130f;
  --shadow-press: 1px 1px 0 #16130f;
  --shadow-inset: inset 3px 3px 0 #16130f26;
  color-scheme: light;
}
[data-theme="dark"] {
  --page: #1e275a;
  --page-dot: #28356f;
  --page-ink: #f7f0dc;
  --page-ink-soft: #b9bfe2;
  --paper: #fffcf2;
  --paper-sunk: #f1e7cc;
  --ink: #16130f;
  --ink-soft: #5b5247;
  --drop: #05071a;
  --yellow: #ffd21f;
  --red: #de2a1f;
  --blue: #1f4fd6;
  --green: #33c25e;
  --pink: #ff74ba;
  --flash: #ffffff;
  --focus: #ffd21f;
  --shadow-sm: 3px 3px 0 #05071a;
  --shadow-md: 5px 5px 0 #05071a;
  --shadow-lg: 8px 8px 0 #05071a;
  --shadow-press: 1px 1px 0 #05071a;
  --shadow-inset: inset 3px 3px 0 #16130f26;
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-panel: 6px;
  --radius-md: 12px;
  --radius-bubble: 22px;
  --radius-full: 9999px;
  --font-display: "Bangers", "Impact", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Kalam", "Comic Sans MS", ui-rounded, cursive;
  --type-display-family: var(--font-display);
  --type-display-size: 64px;
  --type-display-line: 60px;
  --type-display-weight: 400;
  --type-display-tracking: 0.02em;
  --type-title-family: var(--font-display);
  --type-title-size: 40px;
  --type-title-line: 40px;
  --type-title-weight: 400;
  --type-title-tracking: 0.02em;
  --type-heading-family: var(--font-display);
  --type-heading-size: 26px;
  --type-heading-line: 28px;
  --type-heading-weight: 400;
  --type-heading-tracking: 0.03em;
  --type-body-family: var(--font-body);
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-label-family: var(--font-body);
  --type-label-size: 13px;
  --type-label-line: 16px;
  --type-label-weight: 700;
  --type-label-tracking: 0.06em;
  --type-caption-family: var(--font-hand);
  --type-caption-size: 15px;
  --type-caption-line: 20px;
  --type-caption-weight: 700;
}
/* 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); letter-spacing: var(--type-display-tracking); }
.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); letter-spacing: var(--type-title-tracking); }
.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); letter-spacing: var(--type-heading-tracking); }
.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-label { font-family: var(--type-label-family); font-size: var(--type-label-size); line-height: var(--type-label-line); font-weight: var(--type-label-weight); letter-spacing: var(--type-label-tracking); }
.type-caption { font-family: var(--type-caption-family); font-size: var(--type-caption-size); line-height: var(--type-caption-line); font-weight: var(--type-caption-weight); }