/* Ask & Roll: generated from tokens.json */
:root, [data-theme="day"] {
  --table: #eef3ff;
  --check: #3b6fe824;
  --surface: #ffffff;
  --surface-sunk: #e2eafb;
  --line: #c9d5f0;
  --line-strong: #7584b8;
  --ink: #1b2047;
  --ink-muted: #4c537c;
  --on-ink: #ffffff;
  --spark: #ff7a1a;
  --spark-edge: #c24e00;
  --spark-text: #b23f00;
  --on-spark: #1b2047;
  --gold: #ffc83d;
  --focus: #2350e6;
  --cat-faith: #ffd45c;
  --cat-funny: #ff9cc8;
  --cat-icebreaker: #8cd5ff;
  --cat-feelings: #ff8b78;
  --cat-imagine: #c4b0ff;
  --cat-myday: #86e0a8;
  --on-cat: #1b2047;
  --card-back: #1b2047;
  --card-back-ink: #f7f2e8;
  --scrim: #1b204759;
  --shadow-press: 0 4px 0 #7584b8;
  --shadow-press-spark: 0 5px 0 #c24e00;
  --shadow-card: 0 2px 0 #1b20471a, 0 22px 40px -14px #1b204759;
  --shadow-glow: 0 0 0 6px #ffc83d59, 0 0 48px 10px #ffb23d73;
  --focus-ring: 0 0 0 3px #eef3ff, 0 0 0 6px #2350e6;
}
[data-theme="evening"] {
  --table: #12163a;
  --check: #8fa7ff17;
  --surface: #1e2454;
  --surface-sunk: #171c45;
  --line: #343c77;
  --line-strong: #7480c4;
  --ink: #f7f2e8;
  --ink-muted: #b6bbdf;
  --on-ink: #1b2047;
  --spark: #ff8a33;
  --spark-edge: #b34a00;
  --spark-text: #ffa35c;
  --gold: #ffd15c;
  --focus: #9db4ff;
  --cat-faith: #f2c64e;
  --cat-funny: #f28dba;
  --cat-icebreaker: #7cc5ef;
  --cat-feelings: #f27d6a;
  --cat-imagine: #b4a0f3;
  --cat-myday: #76d09a;
  --card-back: #2b3373;
  --scrim: #05071ab3;
  --shadow-press: 0 4px 0 #0b0e2b;
  --shadow-press-spark: 0 5px 0 #b34a00;
  --shadow-card: 0 2px 0 #00000040, 0 22px 44px -12px #000000b3;
  --shadow-glow: 0 0 0 6px #ffd15c4d, 0 0 56px 12px #ffb23d66;
  --focus-ring: 0 0 0 3px #12163a, 0 0 0 6px #9db4ff;
}
: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: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-card: 30px;
  --radius-die: 24%;
  --radius-full: 9999px;
  --dur-press: 90ms;
  --dur-quick: 180ms;
  --dur-roll: 1150ms;
  --dur-burst: 900ms;
  --dur-card: 700ms;
  --dur-flip: 520ms;
  --dur-idle: 2600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-roll: cubic-bezier(0.18, 0.7, 0.25, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --size-tap: 48px;
  --size-die: 136px;
  --size-card: 340px;
  --size-check: 28px;
  --font-display: Grandstander, "Trebuchet MS", system-ui, sans-serif;
  --font-read: Andika, Verdana, system-ui, sans-serif;
}
.display { font-family: var(--font-display); font-size: 34px; line-height: 38px; font-weight: 800; letter-spacing: -0.01em; }
.title { font-family: var(--font-display); font-size: 24px; line-height: 28px; font-weight: 800; }
.label { font-family: var(--font-display); font-size: 17px; line-height: 20px; font-weight: 700; }
.label-small { font-family: var(--font-display); font-size: 14px; line-height: 18px; font-weight: 700; }
.question-big { font-family: var(--font-read); font-size: 32px; line-height: 40px; font-weight: 700; }
.question { font-family: var(--font-read); font-size: 27px; line-height: 35px; font-weight: 700; }
.body { font-family: var(--font-read); font-size: 17px; line-height: 26px; font-weight: 400; }
.caption { font-family: var(--font-read); font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.06em; }
@font-face { font-family: "Grandstander"; src: url("fonts/Grandstander-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Andika"; src: url("fonts/Andika-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Andika"; src: url("fonts/Andika-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }