/* Gumdrop design tokens — generated from tokens.json. Themes: light, dark (default: light).
   Switch theme with <html data-theme="dark">. */
:root, [data-theme="light"] {
  --table: #f3e9dd;
  --clay: #fffaf3;
  --clay-sunk: #eadccc;
  --clay-base: #d4bfa9;
  --rim: #927a6b;
  --shade: #5a2d3a;
  --ink: #2a1c25;
  --ink-soft: #6a5560;
  --on-candy: #2a1c25;
  --tangerine: #ff8b3d;
  --cherry: #f2545b;
  --mint: #2fc596;
  --lemon: #ffcd3c;
  --blueberry: #5b8def;
  --focus: #2f5bd3;
  --scrim: #2a1c2566;
  --clay-highlight: inset 0 2px 0 #ffffffa6;
  --clay-shade: inset 0 -3px 0 #5a2d3a1a;
  --clay-ambient: 0 10px 18px -10px #5a2d3a59;
  --clay-ambient-lift: 0 20px 28px -14px #5a2d3a66;
  --clay-slab: inset 0 2px 0 #ffffffa6, inset 0 -3px 0 #5a2d3a1a, 0 7px 0 #d4bfa9, 0 16px 22px -12px #5a2d3a59;
  --well: inset 0 3px 0 #5a2d3a14, inset 0 2px 6px #5a2d3a1f;
  color-scheme: light;
}
[data-theme="dark"] {
  --table: #1d1520;
  --clay: #2b2030;
  --clay-sunk: #150f17;
  --clay-base: #0f0a11;
  --rim: #8f7a88;
  --shade: #120a12;
  --ink: #f8eee8;
  --ink-soft: #c4b1bc;
  --on-candy: #2a1c25;
  --tangerine: #ff9a52;
  --cherry: #ff6b73;
  --mint: #45dcae;
  --lemon: #ffd84d;
  --blueberry: #7ea9ff;
  --focus: #8fb4ff;
  --scrim: #0b060ccc;
  --clay-highlight: inset 0 1.5px 0 #ffffff29;
  --clay-shade: inset 0 -3px 0 #00000040;
  --clay-ambient: 0 10px 20px -10px #000000a6;
  --clay-ambient-lift: 0 20px 30px -14px #000000bf;
  --clay-slab: inset 0 1.5px 0 #ffffff29, inset 0 -3px 0 #00000040, 0 7px 0 #0f0a11, 0 16px 24px -12px #000000a6;
  --well: inset 0 3px 0 #00000059, inset 0 2px 6px #00000066;
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;
  --depth-sm: 3px;
  --depth-md: 5px;
  --depth-lg: 7px;
  --font-display: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --font-body: "Figtree", 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: 600;
  --type-display-tracking: -0.015em;
  --type-title-family: var(--font-display);
  --type-title-size: 34px;
  --type-title-line: 38px;
  --type-title-weight: 600;
  --type-title-tracking: -0.01em;
  --type-heading-family: var(--font-display);
  --type-heading-size: 22px;
  --type-heading-line: 28px;
  --type-heading-weight: 600;
  --type-numeric-family: var(--font-display);
  --type-numeric-size: 48px;
  --type-numeric-line: 48px;
  --type-numeric-weight: 600;
  --type-numeric-tracking: -0.01em;
  --type-body-family: var(--font-body);
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 400;
  --type-body-sm-family: var(--font-body);
  --type-body-sm-size: 14px;
  --type-body-sm-line: 20px;
  --type-body-sm-weight: 400;
  --type-label-family: var(--font-body);
  --type-label-size: 15px;
  --type-label-line: 20px;
  --type-label-weight: 700;
  --type-label-tracking: 0.005em;
  --type-caption-family: var(--font-body);
  --type-caption-size: 12px;
  --type-caption-line: 16px;
  --type-caption-weight: 600;
  --type-caption-tracking: 0.02em;
}
/* 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); }
.type-numeric { font-family: var(--type-numeric-family); font-size: var(--type-numeric-size); line-height: var(--type-numeric-line); font-weight: var(--type-numeric-weight); letter-spacing: var(--type-numeric-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-body-sm { font-family: var(--type-body-sm-family); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line); font-weight: var(--type-body-sm-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); letter-spacing: var(--type-caption-tracking); }