/* color_scheme: dark means the component sits on a dark surface, which the
   section or a utility class supplies. data-bs-theme flips Bootstrap; this
   remaps the --theme-* tokens it can't reach. */
[data-color-scheme="dark"] {
  --theme-color-ink: var(--theme-color-ink-inverse, #f8f9fa);
  --theme-color-ink-muted: var(--theme-color-ink-muted-inverse, rgb(248, 249, 250, 0.75));
  --theme-color-surface: var(--theme-color-surface-inverse, #212529);
  --theme-color-surface-subtle: var(--theme-color-surface-subtle-inverse, #2b3035);
  --theme-color-border: var(--theme-color-border-inverse, rgb(255, 255, 255, 0.15));

  /* Accents lightened toward white so icons, links and cues keep WCAG
     contrast. Derived from --bs-primary, as a property can't reference itself. */
  --theme-color-primary: var(--theme-color-primary-inverse, color-mix(in srgb, var(--bs-primary, #0d6efd) 45%, #fff));
}

/* Outranks a component's own root colour, whichever stylesheet loads last. */
:root [data-color-scheme="dark"] {
  color: var(--theme-color-ink);
}