:root {
  --brand-bg: #f7f7f8;
  --brand-surface: rgba(255, 255, 255, 0.82);
  --brand-surface-strong: #ffffff;
  --brand-ink: #333840;
  --brand-muted: #707883;
  --brand-soft: #eef0f4;
  --brand-line: rgba(35, 39, 46, 0.08);
  --brand-accent: #d96f7a;
  --brand-accent-soft: #f8d6da;
  --brand-shadow: 0 18px 54px rgba(28, 31, 38, 0.08);
  --brand-radius-xl: 28px;
  --brand-radius-lg: 20px;
  --brand-radius-md: 14px;
  --brand-content-max: 1480px;
}

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-accent) 72%, white);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}