/* Up & Adder — generated from tokens.json */
:root, [data-theme="light"] {
  --cloth: #d6dffa;
  --cloth-check: rgba(96, 118, 214, 0.16);
  --paper: #fffcf4;
  --paper-sunk: #f3eddc;
  --paper-lip: #e3d7bc;
  --line: #e6decb;
  --scrim: rgba(28, 24, 64, 0.45);
  --ink: #24203f;
  --ink-soft: #4f4a6d;
  --outline: #24203f;
  --board: #fff4d6;
  --board-alt: #ffe6b5;
  --board-edge: #e0a85e;
  --board-edge-deep: #b97f3a;
  --board-ink: #3b2f27;
  --tomato: #d93c1d;
  --tomato-lip: #a3290e;
  --on-tomato: #ffffff;
  --tomato-soft: #ffe1d8;
  --tomato-ink: #b4321a;
  --gold: #ffc233;
  --gold-lip: #c98a10;
  --on-gold: #24203f;
  --gold-soft: #fff0c7;
  --gold-ink: #8a5a00;
  --grape: #6d4af0;
  --grape-lip: #4b2dc4;
  --on-grape: #ffffff;
  --grape-soft: #ece6ff;
  --grape-ink: #5b3fd6;
  --mint: #2dbe7e;
  --mint-lip: #1e8a59;
  --on-mint: #24203f;
  --mint-soft: #d9f6e8;
  --mint-ink: #1a6e4b;
  --sky: #2f6fe0;
  --sky-lip: #1e4fae;
  --on-sky: #ffffff;
  --sky-soft: #dde9ff;
  --sky-ink: #2a5bc0;
  --pip-tomato: #f0533a;
  --pip-sky: #3b82f6;
  --pip-sun: #f5b82e;
  --pip-mint: #22b573;
  --pip-grape: #8b5cf6;
  --pip-bubble: #f06eb0;
  --snake-lime: #86d13f;
  --snake-lime-band: #3e8a22;
  --snake-coral: #ff8159;
  --snake-coral-band: #c8442b;
  --snake-teal: #22b8b0;
  --snake-teal-band: #0e6f6a;
  --snake-king: #7b3fa0;
  --snake-king-band: #f5c542;
  --snake-belly: #fff1c9;
  --wood: #e2a65a;
  --wood-lip: #a9692a;
  --golden: #ffd15c;
  --golden-lip: #c9901a;
  --stick: #f0d6a6;
  --tape: #f8f4e8;
  --shade: rgba(44, 38, 120, 0.22);
  --sunlight: rgba(255, 214, 140, 0.55);
  --focus: var(--sky);
  --shadow-rest: 0 2px 0 rgba(44, 38, 120, 0.10), 3px 6px 12px -4px rgba(44, 38, 120, 0.22);
  --shadow-lift: 0 2px 0 rgba(44, 38, 120, 0.08), 8px 16px 28px -8px rgba(44, 38, 120, 0.30);
  --shadow-cast: 14px 22px 34px -12px rgba(44, 38, 120, 0.38);
  --focus-ring: 0 0 0 3px #fffcf4, 0 0 0 6px #2f6fe0;
}
[data-theme="dark"] {
  --cloth: #161a31;
  --cloth-check: rgba(140, 160, 255, 0.07);
  --paper: #231e3d;
  --paper-sunk: #1b1731;
  --paper-lip: #141127;
  --line: #3a3460;
  --scrim: rgba(6, 5, 18, 0.62);
  --ink: #f6f1ff;
  --ink-soft: #b9b2d6;
  --outline: #1a1530;
  --board: #f6e6bf;
  --board-alt: #edcf96;
  --board-edge: #b9803f;
  --board-edge-deep: #8a5a2a;
  --tomato: #ff6a4d;
  --tomato-lip: #c2401f;
  --on-tomato: #1b1027;
  --tomato-soft: #4a1d17;
  --tomato-ink: #ff8a70;
  --gold: #ffc94d;
  --gold-lip: #c48a12;
  --on-gold: #2a1e05;
  --gold-soft: #3d3015;
  --gold-ink: #ffd36b;
  --grape: #a28bff;
  --grape-lip: #6f55e0;
  --on-grape: #1a1238;
  --grape-soft: #2e2660;
  --grape-ink: #b8a6ff;
  --mint: #4fd69a;
  --mint-lip: #23996a;
  --on-mint: #0f241a;
  --mint-soft: #173a2c;
  --mint-ink: #6ee0a8;
  --sky: #6fa2ff;
  --sky-lip: #3c6fd6;
  --on-sky: #0d1a33;
  --sky-soft: #1c2b52;
  --sky-ink: #8fb6ff;
  --shade: rgba(0, 0, 12, 0.5);
  --sunlight: rgba(255, 190, 110, 0.28);
  --focus: var(--sky);
  --shadow-rest: 0 2px 0 rgba(0, 0, 0, 0.35), 3px 6px 14px -4px rgba(0, 0, 0, 0.55);
  --shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.30), 8px 16px 30px -8px rgba(0, 0, 0, 0.65);
  --shadow-cast: 12px 20px 34px -10px rgba(0, 0, 0, 0.70);
  --focus-ring: 0 0 0 3px #231e3d, 0 0 0 6px #6fa2ff;
}
: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-tile: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --dur-tap: 90ms;
  --dur-quick: 160ms;
  --dur-hop: 220ms;
  --dur-pop: 320ms;
  --dur-stage: 600ms;
  --dur-slide: 900ms;
  --dur-roll: 1100ms;
  --ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-lift: cubic-bezier(0.2, 0.6, 0.35, 1);
  --ease-gravity: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-slither: cubic-bezier(0.65, 0, 0.35, 1);
  --board-tilt: 26deg;
  --lip-height: 6px;
  --lip-height-sm: 4px;
  --pip-size: 52px;
  --die-size: 72px;
  --font-display: "DynaPuff", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-ui: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.shout { font-family: var(--font-display); font-size: 72px; line-height: 64px; font-weight: 700; letter-spacing: -0.01em; }
.title-xl { font-family: var(--font-display); font-size: 56px; line-height: 56px; font-weight: 700; letter-spacing: -0.015em; }
.title-l { font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 600; }
.title-m { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 600; }
.numeral { font-family: var(--font-display); font-size: 44px; line-height: 44px; font-weight: 700; }
.heading { font-family: var(--font-ui); font-size: 20px; line-height: 26px; font-weight: 800; }
.lead { font-family: var(--font-ui); font-size: 18px; line-height: 26px; font-weight: 500; }
.body { font-family: var(--font-ui); font-size: 16px; line-height: 24px; font-weight: 400; }
.caption { font-family: var(--font-ui); font-size: 13px; line-height: 18px; font-weight: 500; }
.eyebrow { font-family: var(--font-ui); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.09em; }
.button-label { font-family: var(--font-ui); font-size: 18px; line-height: 20px; font-weight: 700; }
.stat { font-family: var(--font-ui); font-size: 18px; line-height: 20px; font-weight: 800; }
.tile-number { font-family: var(--font-ui); font-size: 12px; line-height: 12px; font-weight: 700; }