/* Pop design tokens — generated from tokens.json. Themes: light, dark (default: light).
   Switch theme with <html data-theme="dark">. */
:root, [data-theme="light"] {
  --board: #fdf1dc;
  --dot: #ead9b9;
  --paper: #fffaf0;
  --paper-sunk: #fbecd2;
  --ink: #111111;
  --drop: #111111;
  --text: #111111;
  --text-soft: #4a4237;
  --text-faint: #675d4e;
  --side: #111111;
  --side-text: #fdf1dc;
  --yellow: #ffd23f;
  --blue: #3b4cf5;
  --red: #ff5a36;
  --pink: #ff8fd8;
  --mint: #2fd3a0;
  --lilac: #b8a6ff;
  --flash: #ffffff;
  --focus: #3b4cf5;
  --shadow-xs: 2px 2px 0 #111111;
  --shadow-sm: 4px 4px 0 #111111;
  --shadow-md: 6px 6px 0 #111111;
  --shadow-lift: 9px 9px 0 #111111;
  --shadow-press: 1px 1px 0 #111111;
  --shadow-focus: 5px 5px 0 #ffd23f;
  color-scheme: light;
}
[data-theme="dark"] {
  --board: #161514;
  --dot: #2a2724;
  --paper: #232120;
  --paper-sunk: #2c2926;
  --ink: #000000;
  --drop: #4a4239;
  --text: #fdf1dc;
  --text-soft: #d2c6b0;
  --text-faint: #b0a48f;
  --side: #0b0a09;
  --side-text: #fdf1dc;
  --yellow: #ffd23f;
  --blue: #3b4cf5;
  --red: #ff5a36;
  --pink: #ff8fd8;
  --mint: #2fd3a0;
  --lilac: #b8a6ff;
  --flash: #ffffff;
  --focus: #ffd23f;
  --shadow-xs: 2px 2px 0 #4a4239;
  --shadow-sm: 4px 4px 0 #4a4239;
  --shadow-md: 6px 6px 0 #4a4239;
  --shadow-lift: 9px 9px 0 #4a4239;
  --shadow-press: 1px 1px 0 #4a4239;
  --shadow-focus: 5px 5px 0 #ffd23f;
  color-scheme: dark;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 14px;
  --radius-card: 24px;
  --radius-lg: 30px;
  --radius-pill: 999px;
  --dur-press: 70ms;
  --dur-snap: 160ms;
  --dur-lift: 220ms;
  --dur-pop: 350ms;
  --dur-roll: 450ms;
  --dur-wiggle: 3200ms;
  --ease-pop: cubic-bezier(0.34, 1.45, 0.64, 1);
  --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-press: cubic-bezier(0.3, 0, 0.6, 1);
  --font-display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --font-body: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --type-display-family: var(--font-display);
  --type-display-size: 60px;
  --type-display-line: 57px;
  --type-display-weight: 800;
  --type-display-tracking: -0.055em;
  --type-title-family: var(--font-display);
  --type-title-size: 38px;
  --type-title-line: 40px;
  --type-title-weight: 800;
  --type-title-tracking: -0.045em;
  --type-heading-family: var(--font-display);
  --type-heading-size: 22px;
  --type-heading-line: 26px;
  --type-heading-weight: 800;
  --type-heading-tracking: -0.035em;
  --type-num-family: var(--font-display);
  --type-num-size: 34px;
  --type-num-line: 34px;
  --type-num-weight: 800;
  --type-num-tracking: -0.05em;
  --type-body-family: var(--font-body);
  --type-body-size: 16px;
  --type-body-line: 24px;
  --type-body-weight: 500;
  --type-small-family: var(--font-body);
  --type-small-size: 13.5px;
  --type-small-line: 20px;
  --type-small-weight: 500;
  --type-label-family: var(--font-body);
  --type-label-size: 11.5px;
  --type-label-line: 16px;
  --type-label-weight: 700;
  --type-label-tracking: 0.06em;
  --type-button-family: var(--font-body);
  --type-button-size: 14.5px;
  --type-button-line: 20px;
  --type-button-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-num { font-family: var(--type-num-family); font-size: var(--type-num-size); line-height: var(--type-num-line); font-weight: var(--type-num-weight); letter-spacing: var(--type-num-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-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-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); text-transform: uppercase; }
.type-button { font-family: var(--type-button-family); font-size: var(--type-button-size); line-height: var(--type-button-line); font-weight: var(--type-button-weight); }