@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./nunito-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('./nunito-800.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --canvas: #f5f4f6;
  --ink: #1f2328;
  --muted: #59616b;
  --accent: #8f2058;
  --step: #e53935;
  --sans: 'Nunito', ui-sans-serif, system-ui, sans-serif;
  --color-background: var(--canvas);
  --color-foreground: var(--ink);
  --color-surface: #ffffff;
  --color-primary: var(--accent);
  --color-status: #137333;
  --color-destructive: #b3261e;
  --color-border: #dadce0;
  --color-focus: var(--ink);
  --font-size-body: 17px;
  --font-size-title-min: 1.5rem;
  --font-size-title-fluid: 3vw;
  --font-size-title-max: 2.3rem;
  --font-size-title-small: 1.125rem;
  --font-weight-body: 400;
  --font-weight-heading: 800;
  --line-height-body: 1.5;
  --shell-width: 940px;
  --shell-padding-top: clamp(20px, 3vw, 36px);
  --shell-padding-inline: 20px;
  --shell-padding-bottom: 60px;
  --screen-height: 100svh;
  --line-margin: 6px;
  --circle-size: 22px;
  --circle-font-size: 13px;
  --circle-border-width: 1.5px;
  --shot-width: 760px;
  --shot-margin-top: 14px;
  --shot-margin-bottom: 26px;
  --shot-radius: 10px;
  --shot-placeholder-height: 120px;
  --shot-click-max-height: 12rem;
  --shot-shadow: 0 8px 26px rgba(31, 35, 40, 0.1);
  --brand-mark-size: 44px;
  --brand-mark-size-small: 28px;
  --party-size: 44px;
  --party-padding-right: 6px;
  --border-width: 1px;
  --focus-ring-width: 2px;
  --motion-short: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --footer-margin-top: 28px;
  --footer-font-size: 14px;
}

/* 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;
  }
}