/* Flech accent — the one brand colour on the page.
   Change --flech-accent here and every CTA follows. Loaded last, so the
   !important beats both the captured inline `style="color:var(--ink)"` and
   Tailwind's own important utility (`!text-core-silver-1`) on the dark pills. */
:root {
  --flech-accent: rgb(185, 157, 249);
  --flech-accent-hover: rgb(170, 138, 246);
  --flech-accent-active: rgb(158, 124, 244);
  /* near-black with a violet cast: 8.2:1 on the accent, comfortably past AA */
  --flech-accent-ink: #17121f;
  /* the accent deepened for text and hairlines on the light hero ground,
     where the accent itself is only 1.9:1. 5.0:1 there, so AA for body text */
  --flech-accent-deep: #6a4bc4;
}

.hero-cta-dark,
.hero-cta-light,
.site-island-cta {
  background-color: var(--flech-accent) !important;
  color: var(--flech-accent-ink) !important;
}

.hero-cta-dark:hover,
.hero-cta-light:hover,
.site-island-cta:hover {
  background-color: var(--flech-accent-hover) !important;
}

.hero-cta-dark:active,
.hero-cta-light:active,
.site-island-cta:active {
  background-color: var(--flech-accent-active) !important;
}

/* the leading icons carry a muted secondary tone keyed to the old silver ramp;
   on the accent that reads as dirt, so tie it to the label colour instead */
.hero-cta-dark [data-color="color-2"],
.hero-cta-light [data-color="color-2"],
.site-island-cta [data-color="color-2"] {
  color: currentColor !important;
  opacity: 0.55;
}

/* the dark pills shipped with no shadow; on a light ground the accent needs a
   hairline to sit on rather than float */
.hero-cta-dark {
  box-shadow: 0 0 0 0.5px rgba(88, 60, 160, 0.22), 0 2px 6px rgba(88, 60, 160, 0.18) !important;
}