/* Slaps design tokens — generated from tokens.json. Themes: light, dark (default: light).
   Switch theme with <html data-theme="dark">. */
:root, [data-theme="light"] {
  --board: #dde1e6;
  --paper: #fffdf8;
  --die: #ffffff;
  --edge: #1412181f;
  --backing: #d9d2c2;
  --ink: #141218;
  --text: #141218;
  --text-soft: #5c5663;
  --drop: #141218;
  --focus: #2456f0;
  --tomato: #ff5b3a;
  --sunflower: #ffd23f;
  --grass: #3fcf6a;
  --sky: #4aa8ff;
  --bubblegum: #ff8fd8;
  --grape: #6b3be0;
  --sticker-sm: 0 0 0 3px #ffffff, 0 0 0 4px #1412181f, 2px 3px 0 4px #141218;
  --sticker-md: 0 0 0 5px #ffffff, 0 0 0 6px #1412181f, 3px 4px 0 6px #141218;
  --sticker-lift: 0 0 0 5px #ffffff, 0 0 0 6px #1412181f, 6px 7px 0 6px #141218;
  --sticker-press: 0 0 0 5px #ffffff, 0 0 0 6px #1412181f, 0 1px 0 6px #141218;
  --sticker-lg: 0 0 0 6px #ffffff, 0 0 0 7px #1412181f, 5px 6px 0 7px #141218;
  --drop-flat: 3px 3px 0 0 #141218;
  color-scheme: light;
}
[data-theme="dark"] {
  --board: #141416;
  --paper: #26252b;
  --die: #f4f1ea;
  --edge: #ffffff1a;
  --backing: #cfc8b8;
  --ink: #0c0b0e;
  --text: #f6f2ea;
  --text-soft: #b3aebb;
  --drop: #45414e;
  --focus: #8fb0ff;
  --sticker-sm: 0 0 0 3px #f4f1ea, 0 0 0 4px #ffffff1a, 2px 3px 0 4px #45414e;
  --sticker-md: 0 0 0 5px #f4f1ea, 0 0 0 6px #ffffff1a, 3px 4px 0 6px #45414e;
  --sticker-lift: 0 0 0 5px #f4f1ea, 0 0 0 6px #ffffff1a, 6px 7px 0 6px #45414e;
  --sticker-press: 0 0 0 5px #f4f1ea, 0 0 0 6px #ffffff1a, 0 1px 0 6px #45414e;
  --sticker-lg: 0 0 0 6px #f4f1ea, 0 0 0 7px #ffffff1a, 5px 6px 0 7px #45414e;
  --drop-flat: 3px 3px 0 0 #000000;
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --font-display: "Lilita One", "Rubik", ui-rounded, system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-display-family: var(--font-display);
  --type-display-size: 56px;
  --type-display-line: 56px;
  --type-display-weight: 400;
  --type-display-tracking: 0.005em;
  --type-title-family: var(--font-display);
  --type-title-size: 32px;
  --type-title-line: 36px;
  --type-title-weight: 400;
  --type-title-tracking: 0.01em;
  --type-heading-family: var(--font-display);
  --type-heading-size: 21px;
  --type-heading-line: 26px;
  --type-heading-weight: 400;
  --type-heading-tracking: 0.015em;
  --type-body-family: var(--font-body);
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 500;
  --type-label-family: var(--font-body);
  --type-label-size: 15px;
  --type-label-line: 20px;
  --type-label-weight: 800;
  --type-caption-family: var(--font-body);
  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-caption-weight: 800;
  --type-caption-tracking: 0.06em;
}
/* 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); }
.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); letter-spacing: var(--type-caption-tracking); }