/* Brand 1.0.0: selected Sample A + Page 1 revision-2 typography.
   Import on selected A/approved marketing outputs only, not historical B/candidate pages.
   Claude maps these semantic roles to existing selectors; this does not change live pages by itself. */
:root {
  --brand-cream: #FFF6E7;
  --brand-blush: #F2B8C8;
  --brand-sage: #C7DACC;
  --brand-berry: #8C2F54;
  --brand-ink: #263C35;
  --brand-muted: #59685C;
  --brand-border: #6E7F72;
  --brand-background: var(--brand-cream);
  --brand-text: var(--brand-ink);
  --brand-hero-frame: var(--brand-blush);
  --brand-caregiver-frame: var(--brand-blush);
  --brand-play-frame: var(--brand-blush);
  --brand-facts-surface: var(--brand-sage);
  --brand-cuddle-frame: var(--brand-sage);
  --brand-rates-surface: var(--brand-berry);
  --brand-footer-surface: var(--brand-ink);
  --brand-action-fill: var(--brand-ink);
  --brand-action-text: var(--brand-cream);
  --brand-action-hover: var(--brand-berry);
  --brand-inverse-action-fill: var(--brand-cream);
  --brand-inverse-action-text: var(--brand-ink);
  --brand-focus-light: var(--brand-berry);
  --brand-focus-dark: var(--brand-cream);
  --brand-font-display: "Bree Serif", Georgia, serif;
  --brand-font-body: "Figtree", Arial, sans-serif;
  --brand-display-weight: 400;
  --brand-body-weight: 400;
  --brand-label-weight: 500;
  --brand-control-weight: 600;
  --brand-h1-phone-size: 42px;
  --brand-h1-phone-line: 46px;
  --brand-h1-small-size: 38px;
  --brand-h1-small-line: 42px;
  --brand-h1-desktop-size: 68px;
  --brand-h1-desktop-line: 72px;
  --brand-body-phone-size: 17px;
  --brand-body-phone-line: 26px;
  --brand-body-desktop-size: 18px;
  --brand-body-desktop-line: 28px;
  --brand-control-size: 17px;
  --brand-control-line: 22px;
  --brand-target-min: 44px;
  --brand-target-gap: 8px;
  --brand-space-unit: 8px;
  --brand-side-phone: 24px;
  --brand-side-tablet: 40px;
  --brand-side-desktop: 56px;
  --brand-content-max: 76rem;
  --brand-text-measure: 34rem;
  --brand-control-radius: 4px;
}