/**
 * OVA9™ brand tokens — the single source of truth for funnel colour.
 *
 * The funnel ships two unrelated styling systems: the landing page uses Tailwind
 * with arbitrary values reading `--brand-*` / `--text-*` (see landing/tokens.css),
 * while checkout, upsell and receipt use next-core.css with a `--brand--color--*`
 * namespace. Both are remapped onto the `--ova9-*` tokens below, so a colour only
 * ever has to be changed here.
 *
 * Loaded before both systems in base.html and base-landing.html, since they
 * reference these values.
 *
 * FAQ chevrons, checkmarks and the 90-day badge are SVG files with this primary
 * hex painted in — they do not read CSS variables when used as <img>. Recolor
 * those assets if --ova9-primary changes.
 */
html {
  scroll-behavior: smooth;
}

:root {
  /* Primary accent — links, selected states, highlights.
     Burgundy, a step darker than the first brand sample. Still a dark fill. */
  --ova9-primary: hsl(353, 70%, 27%);
  --ova9-primary-hover: hsl(353, 68%, 20%);
  --ova9-primary-tint: #F7E7EB;
  --ova9-primary-foreground: #FEFAFA;

  /* Button fill. Same burgundy as the headlines. Light label stays light. */
  --ova9-cta: hsl(353, 70%, 27%);
  --ova9-cta-hover: hsl(353, 68%, 20%);
  --ova9-cta-foreground: #FEFAFA;

  /* Text. Descriptions use the same color as titles and benefit lines. */
  --ova9-text: #260e10;
  --ova9-text-muted: #260e10;
  --ova9-text-inverse: #ffffff;

  /* Surfaces */
  --ova9-surface: #FEFAFA;
  --ova9-surface-alt: #F7E7EB;
  --ova9-border: #5A262C;

  /* Accents */
  --ova9-success: #e3f2e3;
  --ova9-star: #ff9425;

  /* Bundle badge pills */
  --ova9-badge-popular: #5A262C;
  --ova9-badge-popular-surface: #E1C6CC;
  --ova9-badge-value: #FEFAFA;
  --ova9-badge-value-surface: #5A262C;
}

.ova9-cta-btn {
  background-color: var(--ova9-cta);
  color: var(--ova9-cta-foreground);
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.ova9-cta-btn:hover {
  background-color: var(--ova9-cta-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(90, 38, 44, 0.28);
}
.ova9-cta-btn:active {
  transform: translateY(0);
  box-shadow: none;
}