:root {
  color-scheme: light;

  --background: #ffffff;
  --foreground: #20262b;
  --surface: #f5f7f8;
  --surface-foreground: #20262b;
  --muted-foreground: #57626b;
  --primary: #20262b;
  --primary-foreground: #ffffff;
  --destructive: #9a2a32;
  --success: #245d43;
  --border: #dce2e6;
  --focus-ring: #20262b;
  --step-number-background: #ffffff;
  --step-number-ink: #111111;
  --selection-background: #20262b;
  --selection-foreground: #ffffff;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-size-body: 17px;
  --font-size-body-small: 16px;
  --font-size-title: clamp(24px, 3vw, 37px);
  --font-size-title-small: clamp(15px, 4.4vw, 20px);
  --font-size-step-number: 13px;
  --font-size-party: clamp(28px, 4vw, 40px);
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-body: 1.5;
  --line-height-title: 1.2;
  --line-height-control: 1;
  --letter-spacing-title: -0.01em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-step-number-inline: 3px;
  --space-step-number-block: 8px;
  --space-title-bottom: 12px;
  --space-shot-top: 12px;
  --space-shot-bottom: 24px;
  --space-welcome-inline: 20px;
  --space-welcome-bottom: 60px;
  --space-step-padding-min: 20px;
  --space-step-padding-fluid: 3vw;
  --space-step-padding-max: 36px;

  --welcome-max-width: 940px;
  --shot-max-width: 760px;
  --shot-placeholder-min-height: 120px;
  --popup-max-width: 420px;
  --step-min-height: 100svh;
  --control-min-size: 44px;
  --step-number-size: 22px;

  --border-width: 1px;
  --step-number-border-width: 1.5px;
  --focus-outline-width: 2px;
  --radius-control: 12px;
  --radius-shot: 12px;
  --radius-circle: 50%;
  --shadow-shot: 0 8px 26px rgba(32, 38, 43, 0.1);
  --duration-fast: 120ms;
  --ease-standard: 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;
  }
}