@layer components {
  /* The banner's colours, named for their role and drawn from the site's own tokens. Shared, so the
     admin's colour picker shows the same pairs; a theme redefines any pair to make it its own. */
  .banner-tone--brand     { --banner-bg: var(--color-brand-strong); --banner-fg: var(--color-on-brand); }
  .banner-tone--deep      { --banner-bg: color-mix(in oklab, var(--color-brand-strong) 62%, oklch(0% 0 0)); --banner-fg: oklch(97% 0.01 var(--brand-h)); }
  .banner-tone--soft      { --banner-bg: oklch(var(--lch-brand-soft)); --banner-fg: oklch(var(--lch-brand-strong)); }
  .banner-tone--accent    { --banner-bg: oklch(var(--lch-clay)); --banner-fg: oklch(99% 0 0); }
  .banner-tone--highlight { --banner-bg: color-mix(in oklab, var(--color-caution) 45%, oklch(100% 0 0)); --banner-fg: oklch(38% 0.12 62); }
  .banner-tone--alert     { --banner-bg: oklch(var(--lch-danger)); --banner-fg: oklch(99% 0 0); }
  .banner-tone--success   { --banner-bg: oklch(var(--lch-positive)); --banner-fg: oklch(99% 0 0); }
  .banner-tone--ink       { --banner-bg: oklch(22% 0.01 var(--neutral-h)); --banner-fg: oklch(97% 0.005 var(--neutral-h)); }
  .banner-tone--light     { --banner-bg: oklch(99.5% 0.003 var(--neutral-h)); --banner-fg: oklch(25% 0.012 var(--neutral-h)); }
}