/* ===========================================================================
   TomatoShop brand kit overrides — loaded after ds/styles.css.
   New brand: coral pink #F2607A, forest green #2E5C3F, cream #FAF6EC,
   Poppins SemiBold for display/headings (wordmark font).
   Design-system spacing, shape, and elevation tokens stay in charge.
   =========================================================================== */

:root {
  /* Brand kit palette */
  --brand-coral:       #F2607A;
  --brand-forest:      #2E5C3F;
  --brand-cream:       #FAF6EC;
  --brand-deep-forest: #24452F;
  --brand-coral-soft:  #FDE7EB; /* tint of coral for icon fills */
  --brand-forest-soft: #E7EFE9; /* tint of forest for fills */

  /* Remap design-system semantic aliases to the new brand */
  --base: var(--brand-cream);
  --surface-app: var(--brand-cream);
  --action-primary: var(--brand-coral);
  --action-primary-pressed: #D74763;
  --text-link: var(--brand-forest);
  --new: var(--brand-coral-soft);
  --tomato: var(--brand-coral);

  /* Headings use the wordmark font */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, system-ui, "Helvetica Neue", Arial, sans-serif;
}

/* Display/heading styles pick up Poppins + forest green */
.ts-display, .ts-title1, .ts-title2 {
  font-family: var(--font-display);
  color: var(--brand-forest);
}

/* New-brand component recolors */
.chip-new {
  background: var(--brand-coral-soft);
  color: var(--brand-forest);
}
.icon-tangerine { background: var(--brand-forest-soft); color: var(--brand-forest); }
.icon-punch     { background: var(--brand-coral-soft);  color: var(--brand-coral); }

/* Celebration band goes deep forest with the mono-white mark */
.celebrate {
  background: var(--brand-forest);
}
.celebrate h2 { color: var(--brand-cream); }
.celebrate p  { color: rgba(250, 246, 236, 0.78); }
.celebrate-icon {
  width: 44px;
  height: auto;
  margin-bottom: var(--space-3);
}

/* Wordmark logo sizing */
.site-header .wordmark img { height: 32px; }