/* Nocturne — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md.

   Retuned 2026-11-07 to SmileRadar_Brand_Assets, which supersedes the Stoma32 kit this
   file followed from 2026-10-04. Only the visual language moved — palette, ground,
   elevation. Neither app's name or wording changed: the patient site stays
   "Your Smile. Our Radar.", the portal stays "Dental Radar". The pack's mockups say
   "SmileRadar"; that is the mockups' wording and not a rename.

   Two hues, two jobs, and the split is the system:
     --color-accent    violet  #5A4FC4  identity — marks, active state, focus, chips
     --color-action    teal    #0A675F  what you click — primary buttons and links
   Reach for the accent when something *is* ours, for the action when something *does*
   something. Both hues went DARKER with this pack, so the split costs less than it did:
   white on the teal is 6.74:1 (was 4.82) and the violet on white 6.27:1 (was 4.65), and
   the violet now clears 4.5 on the canvas too — it still marks rather than writes, by
   convention rather than by necessity. Headline ink is the kit's navy #12154A, which is
   most of why the mockups read as one family: the darkest colour on the page is a brand
   colour, not a grey. */

/* Self-hosted, so no request leaves for a font CDN (Google Fonts was an @import here
   until 2026-10-04 — one less third party, and one less thing to explain in a GDPR
   notice). One variable file covers 200–800, which is the whole scale this system uses:
   400–500 body, 600 labels, 650–750 headings. Licence beside it, as the SIL OFL asks. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope-Variable.ttf") format("truetype-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Role tokens — LIGHT is the default. Dark overrides live in the blocks that
     follow the :root declaration; retune each theme there, not inline here. */
  color-scheme: light;
  /* The ground is a lavender-white, not a neutral one, and that is load-bearing: the
     hero artwork in this pack ships WITHOUT transparency on a #f8f7ff-ish plate, so the
     canvas has to meet it or the illustration sits in a visible box. */
  --color-bg: #fbfaff;
  --color-surface: #ffffff;
  /* Navy, not charcoal. The kit writes headlines in its darkest brand colour rather
     than in grey, which is most of why the mockups read as one family. */
  --color-text: #12154a;
  --color-accent: #5a4fc4;
  /* A genuine second hue rather than another purple, so the theme has somewhere to
     find colour that isn't the accent — and it is also the action colour, dark enough
     to carry white text on a button (6.74:1, up from 4.82 before this pack). */
  --color-accent-2: #0a675f;
  --color-action: #0a675f;
  --color-action-hover: #085149;
  /* Brand tints for quiet surfaces: mint under the action hue, lavender under the
     identity one. Backgrounds only — neither is a text colour. Both are the kit's own
     hues (#4ec9bd, #d2cefd) taken up to surface lightness. */
  --color-mint: #e8faf8;
  --color-lavender: #efecfe;
  /* Tinted toward the accent rather than grey: a neutral hairline reads as dirt against
     a lavender ground. */
  --color-divider: #e4e1f4;
  --color-muted: #5b6080;
  --color-link: #0a675f;
  --color-link-hover: #085149;
  --color-danger: #b42318;
  --color-warning: #8c5700;
  --color-success: #166344;
  /* The kit's own background: a diagonal white → lavender-white → mint-white, with a
     lavender bloom low-left and a mint one high-right. Taken from
     SmileRadar_Brand_Assets/05_backgrounds/soft-gradient-desktop.svg and expressed in
     tokens so it tracks the palette; the blobs keep that file's opacities. */
  --bg-wash:
    radial-gradient(900px 900px at -4% 108%, color-mix(in srgb, var(--color-accent-300) 32%, transparent), transparent 70%),
    radial-gradient(760px 760px at 102% -8%, color-mix(in srgb, #4ec9bd 10%, transparent), transparent 70%),
    linear-gradient(135deg, #ffffff 0%, #f8f7ff 55%, #e8faf8 100%);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  /* Deck section-divider ground — review round 3: saturation as presence.
     Dividers take a saturated deep indigo (hue 277, the neutral ramp's own
     family; C 0.094 — written when the accent held C 0.030, before the
     round-7 blurple raised it past the ground's) with a lighter bloom and
     a ghost tint of the same hue, while the slide grounds stay
     desaturated. Deck-scale fills only — not interface colors. */
  --color-section: #262a60;
  --color-section-glow: #353b80;
  --color-section-ghost: #4c5397;

  --font-heading: "Manrope", system-ui, sans-serif;
  --font-heading-weight: 700;
  --font-label-weight: 600;
  --font-body: "Manrope", system-ui, sans-serif;

  /* Multiples of 4 since 2026-10-04 — they were a 2.8px scale, which no ruler and no
     designer's grid agrees with. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Controls take 10px, cards 18px — the brand's two radii. --radius-sm is what is left
     for things smaller than a control: chips, tags, the inline case reference. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* Layout: the portal draws its top bar twice — the brand bar over the sidebar and
     the account row over the content — and they only line up while they agree. */
  --topbar-height: 4rem;

  /* Elevation — deliberately light. The brand asks for calm surfaces, so depth is a
     hairline and a soft ink haze rather than a drop shadow you can point at. */
  --shadow-sm: 0 0 0 1px var(--color-divider);
  --shadow-md: 0 1px 2px rgba(18, 21, 74, 0.04), 0 6px 18px rgba(18, 21, 74, 0.07);
  --shadow-lg: 0 2px 6px rgba(18, 21, 74, 0.06), 0 18px 40px rgba(18, 21, 74, 0.10);
}

/* ── Dark theme ──────────────────────────────────────────────────────────
   Applied when the OS asks for dark (unless the user forced light), and
   again for the explicit toggle so it wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    /* The brand kit is a light system; these are its hues carried into the dark one.
       The surface IS the kit's ink (#12154a) — the colour the light theme writes with
       becomes the colour the dark theme writes on, which keeps the family resemblance.
       The action teal lifts slightly here (#0d7d73): the kit's #0a675f keeps its 6.74:1
       with white, but against this darker ground the button itself fell under the 3:1
       UI threshold. The lift trades text contrast down to 5.00 to buy the edge back. Links lighten instead, because they are
       text on the ground rather than text on the hue. */
    --color-bg: #0d0f2e;
    --color-surface: #12154a;
    --color-text: #e9e8f7;
    --color-accent: #b5abfc;
    --color-accent-2: #4ec9bd;
    --color-action: #0d7d73;
    --color-action-hover: #13968a;
    --color-mint: #0d3a37;
    --color-lavender: #241f57;
    --bg-wash: none;
    --color-divider: color-mix(in srgb, #e9e8f7 16%, transparent);
    --color-muted: #a3aec0;
    --color-link: #4ec9bd;
    --color-link-hover: #86e0d6;
    --color-danger: #f0877c;
    --color-warning: #e7a94a;
    --color-success: #5fcf9e;
    --shadow-sm: 0 0 0 1px #2a2d6480;
    --shadow-md: 0 0 0 1px #2c2f66, 0 6px 18px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 0 0 1px #3a3d7a, 0 16px 40px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0d0f2e;
  --color-surface: #12154a;
  --color-text: #e9e8f7;
  --color-accent: #b5abfc;
  --color-accent-2: #4ec9bd;
  --color-action: #0d7d73;
  --color-action-hover: #13968a;
  --color-mint: #0d3a37;
  --color-lavender: #241f57;
  --bg-wash: none;
  --color-divider: color-mix(in srgb, #e9e8f7 16%, transparent);
  --color-muted: #a3aec0;
  --color-link: #4ec9bd;
  --color-link-hover: #86e0d6;
  --color-danger: #f0877c;
  --color-warning: #e7a94a;
  --color-success: #5fcf9e;
  --shadow-sm: 0 0 0 1px #2a2d6480;
  --shadow-md: 0 0 0 1px #2c2f66, 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 0 0 1px #3a3d7a, 0 16px 40px rgba(0, 0, 0, 0.6);
}

/* The light palette, declared a second time so the explicit toggle beats the OS block
   above. Keep it a copy of :root — the two drifting apart is the classic bug here. */
:root[data-theme="light"] {
  color-scheme: light;
  --color-bg: #fbfaff;
  --color-surface: #ffffff;
  --color-text: #12154a;
  --color-accent: #5a4fc4;
  --color-accent-2: #0a675f;
  --color-action: #0a675f;
  --color-action-hover: #085149;
  --color-mint: #e8faf8;
  --color-lavender: #efecfe;
  --color-divider: #e4e1f4;
  --color-muted: #5b6080;
  --color-link: #0a675f;
  --color-link-hover: #085149;
  --color-danger: #b42318;
  --color-warning: #8c5700;
  --color-success: #166344;
  --bg-wash:
    radial-gradient(900px 900px at -4% 108%, color-mix(in srgb, var(--color-accent-300) 32%, transparent), transparent 70%),
    radial-gradient(760px 760px at 102% -8%, color-mix(in srgb, #4ec9bd 10%, transparent), transparent 70%),
    linear-gradient(135deg, #ffffff 0%, #f8f7ff 55%, #e8faf8 100%);
  --shadow-sm: 0 0 0 1px var(--color-divider);
  --shadow-md: 0 1px 2px rgba(18, 21, 74, 0.04), 0 6px 18px rgba(18, 21, 74, 0.07);
  --shadow-lg: 0 2px 6px rgba(18, 21, 74, 0.06), 0 18px 40px rgba(18, 21, 74, 0.10);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.lighten{mix-blend-mode:lighten;background-color:transparent}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 16px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-link); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: var(--color-muted);
}
.text-muted { color: var(--color-muted); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
/* Rules fade to transparent at both ends instead of stopping cleanly — a
   Nocturne signature. The ramp is 48px an end (one deck baseline unit),
   painted from the same divider token. Freestanding rules fade; box
   outlines, in-control separators, and short accent marks stay solid. */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-800); color: var(--color-accent-100); }
.tag-accent-2 { background: var(--color-accent-2-800); color: var(--color-accent-2-100); }
.tag-neutral { background: var(--color-neutral-800); color: var(--color-neutral-100); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid transparent; /* keeps layout; the row paints the fading rule */
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid transparent;
}
/* Row rules as row-level strips so the end-fade spans the row, not each cell. */
.table thead tr {
  background: linear-gradient(to right,
    transparent, var(--color-divider) 48px,
    var(--color-divider) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr {
  background: linear-gradient(to right,
    transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
    color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}
.table tbody tr:hover {
  /* the hover tint layers over the row rule, which keeps painting */
  background:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent),
                    color-mix(in srgb, var(--color-text) 4%, transparent)) no-repeat 0 0 / 100% 100%,
    linear-gradient(to right,
      transparent, color-mix(in srgb, var(--color-text) 8%, transparent) 48px,
      color-mix(in srgb, var(--color-text) 8%, transparent) calc(100% - 48px), transparent) no-repeat bottom / 100% 1px;
}

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }


/* ══════════════════════════════════════════════════════════════════════════
   Brand surfaces — the marketing vocabulary from SmileRadar_Brand_Assets
   (2026-11-07). These are the parts of the mockups that recur: an eyebrow over
   a two-tone headline, a pill call to action, and a line icon inside a soft
   tinted disc. Everything here is built from the tokens above, so a palette
   change still only happens in one place.
   ══════════════════════════════════════════════════════════════════════════ */

/* Small, spaced, upper-case label above a heading. The accent writes here rather
   than the action hue: it names the section, it does not do anything. */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

/* The headline's second half. The mockups set it in the action hue against the
   navy of the first half, which is what makes the line read as one phrase with a
   turn in it rather than as two sentences. */
.headline-accent { color: var(--color-accent-2); }

/* The pill. VIOLET, not the action teal — and this is the one deliberate break
   from the accent/action split documented at the top of this file. Every CTA in
   the brand pack's mockups is violet, and those mockups only ever show marketing
   surfaces. So the pill is violet on marketing pages, while forms keep the teal
   action button: where the pack has an opinion it wins, where it is silent the
   system does. */
.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.85rem 1.75rem;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  background-color: var(--color-accent);
  color: #fff;
  font-weight: var(--font-label-weight, 600);
  text-decoration: none;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 28%, transparent);
  transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.btn-brand:hover,
.btn-brand:focus-visible {
  color: #fff;
  background-color: color-mix(in srgb, var(--color-accent) 86%, #000);
  border-color: color-mix(in srgb, var(--color-accent) 86%, #000);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--color-accent) 34%, transparent);
}
.btn-brand:active { transform: translateY(1px); }
/* The arrow nudges rather than the whole button, so the label stays still and
   readable while the affordance still answers. */
.btn-brand .brand-icon,
.btn-brand svg { transition: transform .15s ease; }
.btn-brand:hover svg { transform: translateX(3px); }

/* A line icon in a soft disc. Two tints, and they alternate down a list in the
   mockups rather than carrying meaning — mint for what the product does, lavender
   for what it is. */
.icon-badge {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background-color: var(--color-lavender);
  color: var(--color-accent);
}
.icon-badge-mint {
  background-color: var(--color-mint);
  color: var(--color-accent-2);
}
.icon-badge-sm { width: 2.25rem; height: 2.25rem; }

/* The icons are drawn in currentColor at a fixed stroke, so they inherit whatever
   writes around them and never need a per-theme colour. */
.brand-icon { display: block; }

@media (prefers-reduced-motion: reduce) {
  .btn-brand, .btn-brand svg { transition: none; }
  .btn-brand:hover svg { transform: none; }
}

/* The pill in dark. The accent inverts between themes — violet on light, the kit's
   lavender on dark — so white ink, which is 6.27:1 on the violet, falls to 2.06:1 on the
   lavender and vanishes. The button keeps its identity colour and flips its ink to the
   page's own navy instead, which is how a light pill on a dark ground has to work.
   Measured at 9.06:1. Declared for the media query and the explicit toggle both. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-brand,
  :root:not([data-theme="light"]) .btn-brand:hover,
  :root:not([data-theme="light"]) .btn-brand:focus-visible { color: var(--color-bg); }
  :root:not([data-theme="light"]) .btn-brand { box-shadow: none; }
}

:root[data-theme="dark"] .btn-brand,
:root[data-theme="dark"] .btn-brand:hover,
:root[data-theme="dark"] .btn-brand:focus-visible { color: var(--color-bg); }
:root[data-theme="dark"] .btn-brand { box-shadow: none; }