/* ===================================
   TARIFF PAGE TOKENS
   Shared by the tariff page sections (hero, language switch, invoice check, basics, timeline,
   question cards, checkout dock, ratings, closing CTA, insurer band): the base --tp-* tokens,
   their campaign-host re-tint and the section title rule. The tariff card family (.tariff-board,
   .tariff-detail-list and the area dialogs) keeps its own palette in benefit-detail-list.css.
   The comparison stylesheet has no --pa-* set, so every token carries its fallback.
   pages/insurance.ejs links this file in the body, after the section stylesheets the head links
   through includeWithCSS, so the rules are written to be order-independent: the base tokens sit
   in :where() with zero specificity, and a section that needs a token differently keeps its own
   declaration, which wins on specificity alone; the re-tint carries class specificity and wins
   over the base tokens the same way.
   =================================== */

:where(
  .blob-background,
  .tariff-language,
  .tariff-invoice,
  .tariff-basics,
  .tariff-timeline,
  .tariff-questions,
  .tariff-dock,
  .ratings-section,
  .insurance-cta,
  .insurer-band,
  .home-page
) {
  --tp-font: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tp-ink: var(--pa-ink, #252721);
  --tp-ink-2: var(--pa-ink-2, rgba(37, 39, 33, 0.78));
  --tp-ink-3: var(--pa-ink-3, rgba(37, 39, 33, 0.6));
  --tp-accent: var(--pa-accent, #0E8377);
  --tp-accent-hover: var(--pa-accent-hover, #0C7568);
  --tp-accent-bright: #2BC0AE;
  --tp-mint: var(--pa-accent-soft, #E3F2EF);
  --tp-grey-tile: #EEF1F2;
  --tp-grey-ink: #5F6B70;
  --tp-paper: #FFFFFF;
  --tp-cream: #F7F7F3;
  --tp-line: rgba(37, 39, 33, 0.12);
}

/* Campaign host (.bb-site): the accent tokens follow --ui-accent. The language switch keeps its
   own hover re-tint (plain --ui-accent) in language-switch.css, so it is left out of the hover rule;
   the hero and the closing CTA re-colour their stage and panel tokens in their own files. */
:where(.bb-site) :is(
  .blob-background,
  .tariff-language,
  .tariff-invoice,
  .tariff-basics,
  .tariff-timeline,
  .tariff-questions,
  .tariff-dock,
  .ratings-section,
  .insurance-cta,
  .insurer-band,
  .home-page
) {
  --tp-accent: var(--ui-accent);
  --tp-accent-bright: var(--ui-accent-light);
  --tp-mint: var(--ui-accent-soft);
}
:where(.bb-site) :is(
  .blob-background,
  .tariff-invoice,
  .tariff-basics,
  .tariff-timeline,
  .tariff-questions,
  .tariff-dock,
  .ratings-section,
  .insurance-cta,
  .insurer-band,
  .home-page
) {
  --tp-accent-hover: var(--ui-accent-strong);
}

/* The section title: tariff card, invoice check, basics, timeline and question cards. */
.tariff-board__title,
.tariff-timeline__title,
.tariff-invoice__title,
.tariff-questions__title,
.tariff-basics__title {
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.15;
  text-align: left;
  color: var(--tp-ink);
  text-wrap: balance;
}