:root {
  --background: #ffffff;
  --foreground: #20262b;
  --surface: #f5f7f8;
  --muted-foreground: #57626b;
  --primary: #c7410e;
  --border: #dce2e6;
  --focus-ring: #20262b;
  --selection-foreground: #ffffff;
  --step-number-background: #ffffff;
  --step-number-foreground: #111111;
  --step-number-border-color: #111111;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --heading-weight: 700;
  --heading-tracking: -0.01em;
  --heading-line-height: 1.2;
  --step-number-weight: 400;
  --step-number-font-size: 13px;
  --step-number-margin-inline: 3px;
  --focus-width: 2px;
  --active-scale: 0.94;
  --unit-line-height: 1;
  --shot-min-height: 120px;
  --popup-max-width: 420px;
  --narrow-title-min: 20px;
  --narrow-title-fluid: 5.6vw;
  --narrow-title-max: 24px;
  --confetti-layer: 40;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --welcome-max: 940px;
  --shot-max: 760px;
  --welcome-padding-min: 20px;
  --welcome-padding-fluid: 3vw;
  --welcome-padding-max: 36px;
  --welcome-padding-bottom: 60px;
  --step-min-height: 100svh;
  --title-size: clamp(24px, 3vw, 37px);
  --body-size: 17px;
  --body-size-small: 16px;
  --line-height: 1.5;
  --step-number-size: 22px;
  --step-number-border: 1.5px;
  --party-size: clamp(28px, 4vw, 40px);
  --target-min: 44px;
  --border-width: 1px;
  --radius: 12px;
  --duration-fast: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* Used only when the product tokens.css has no prefers-color-scheme block. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --background: #14171b;
    --foreground: #e6e9ee;
    --card: #1c2027;
    --card-foreground: #e6e9ee;
    --muted: #262b33;
    --muted-foreground: #9aa3ae;
    --border: #333a44;
    --primary-foreground: #0a1b33;
  }
}