:root {
  --brand-accent: #ff0055;
  --brand-accent-strong: #cc0044;
  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-gray-50: #f3f3f3;
  --brand-gray-100: #e5e5e5;
  --brand-gray-600: #666666;
  --brand-gray-800: #333333;

  --brand-link: var(--brand-accent);
  --brand-link-hover: var(--brand-accent-strong);

  --brand-font-heading: 'DM Serif Display', Georgia, serif;
  --brand-font-body: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --brand-font-size-body-desktop: 20px;
  --brand-font-size-body-mobile: 18px;
  --brand-font-size-label-desktop: 16px;
  --brand-font-size-label-mobile: 15px;
  --brand-font-size-help: 14px;

  --brand-cta-bg: var(--brand-accent);
  --brand-cta-bg-hover: var(--brand-accent-strong);
  --brand-cta-text: var(--brand-white);
  --brand-cta-radius: 9999px;

  --brand-input-radius: 10px;
  --brand-input-border-color: #d3dae3;
  --brand-input-border: 1px solid var(--brand-input-border-color);
  --brand-input-bg: #fcfdff;

  --brand-surface: var(--brand-white);
  --brand-surface-muted: var(--brand-gray-50);
  --brand-text: var(--brand-black);
  --brand-text-muted: var(--brand-gray-800);
}