:root {
  --color-primary: #4141f6;
  --color-primary-dark: #3434c5;
  --color-primary-light: #7676f9;
  --color-cta: #37aff8;
  --color-cta-dark: #2d90cb;
  --color-bg: #fafafa;
  --color-surface: #ffffff;
  --radius: 8px;
}

.hero {
  background: linear-gradient(135deg, #4141f6 0%, #7676f9 55%, #8d8dfa 100%);
}

/* Hover: every text & number takes the pharmacy brand color */
body :is(
  p, span, h1, h2, h3, h4, h5, h6,
  li, a, td, th, label, strong, b, em, i, small,
  time, figcaption, blockquote, dt, dd, address, summary,
  legend, cite, mark, q, u, s, del, ins, abbr, dfn
):hover {
  color: var(--color-primary) !important;
  transition: color 0.15s ease;
}

/* Keep button labels readable */
.btn:hover,
.btn-cta:hover,
a.btn:hover,
a.btn-cta:hover {
  color: #fff !important;
}
.btn:hover span,
.btn-cta:hover span,
a.btn:hover span,
a.btn-cta:hover span {
  color: #fff !important;
  background: transparent !important;
}
.btn:hover,
a.btn:hover:not(.btn-cta) {
  background: var(--color-primary-dark);
}
.btn-cta:hover,
a.btn-cta:hover {
  background: var(--color-cta-dark);
}

/* Light text on hero stays bright */
.hero :is(h1, h2, h3, p, span, a, strong, b, em, small):hover {
  color: #fff !important;
}