/* Final family: Page 3 branding + Page 2 character rendering. Load on final routes only.
   Use data-final-variant="a" or "b" on the final page html element.
   These semantic tokens are a design contract; Claude maps them to actual selectors.
   Preserve Page 3 font files, wordmark, geometry, type sizes and accessible controls. */
:root {
  --final-cream: #FFF6E7;
  --final-blush: #F2B8C8;
  --final-sage: #C7DACC;
  --final-berry: #8C2F54;
  --final-ink: #263C35;
  --final-muted: #59685C;
  --final-border: #6E7F72;
  --final-background: var(--final-cream);
  --final-text: var(--final-ink);
  --final-on-tint-text: var(--final-ink);
  --final-on-dark-text: var(--final-cream);
  --final-action-text: var(--final-cream);
  --final-action-border: var(--final-action-background);
  --final-dark-action-background: var(--final-cream);
  --final-dark-action-text: var(--final-ink);
  --final-focus-on-light: var(--final-berry);
  --final-focus-on-dark: var(--final-cream);
  --final-footer-background: var(--final-ink);
  --final-notice-background: var(--final-sage);
  --final-font-display: "Bodoni Moda", Georgia, serif;
  --final-font-body: "Manrope", Arial, sans-serif;
}

[data-final-variant="a"] {
  --final-hero-frame: #F2B8C8;
  --final-caregiver-frame: #F2B8C8;
  --final-play-frame: #F2B8C8;
  --final-cuddle-frame: #C7DACC;
  --final-facts-background: #C7DACC;
  --final-rates-background: #8C2F54;
  --final-action-background: #263C35;
  --final-action-hover-background: #8C2F54;
}

[data-final-variant="b"] {
  --final-hero-frame: #C7DACC;
  --final-caregiver-frame: #C7DACC;
  --final-play-frame: #C7DACC;
  --final-cuddle-frame: #F2B8C8;
  --final-facts-background: #F2B8C8;
  --final-rates-background: #263C35;
  --final-action-background: #8C2F54;
  --final-action-hover-background: #263C35;
}