/*
  Theme engine 4.0
  A theme defines one compact recipe. Element colors inherit from that recipe.
  Light recipes use the named color as the main surface when contrast allows.
  Dark recipes invert the idea: dark surfaces stay dark, and the theme color becomes the accent/pop color.
*/

:is([class^="thm-"], [class*=" thm-"]) {
  --theme-bg: var(--surface-bg);
  --theme-surface: var(--surface-alt-bg);
  --theme-text: var(--text);
  --theme-heading: var(--heading);
  --theme-accent: var(--accent);
  --theme-highlight-bg: var(--highlight-bg);
  --theme-highlight-text: var(--highlight-text);
  --theme-selection-bg: var(--selection-bg);
  --theme-selection-text: var(--selection-text);
  --theme-border: var(--border);
  --theme-link: var(--theme-heading);
  --theme-link-hover-bg: transparent;
  --theme-link-hover-text: var(--theme-heading);

  --theme-button-primary-bg: var(--button-primary-bg);
  --theme-button-primary-text: var(--button-primary-text);
  --theme-button-primary-border: var(--button-primary-border);
  --theme-button-primary-hover-bg: var(--button-primary-hover-bg);
  --theme-button-primary-hover-text: var(--button-primary-hover-text);
  --theme-button-primary-hover-border: var(--button-primary-hover-border);

  --theme-button-secondary-bg: transparent;
  --theme-button-secondary-text: var(--button-secondary-text);
  --theme-button-secondary-border: var(--button-secondary-border);
  --theme-button-secondary-hover-bg: var(--button-secondary-hover-bg);
  --theme-button-secondary-hover-text: var(--button-secondary-hover-text);
  --theme-button-secondary-hover-border: var(--button-secondary-hover-border);

  --theme-code-bg: rgba(var(--black-rgb), var(--alpha-08));
  --theme-code-text: var(--theme-heading);

  background-color: var(--theme-bg);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(article, aside, .card-outline, fieldset, details, dialog) {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(h1, h2, h3, h4, h5, h6, legend, summary, dt) {
  color: var(--theme-heading);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(p, li, dd, address, label, span, blockquote) {
  color: inherit;
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(small, caption, figcaption, cite) {
  color: var(--theme-text);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(strong, b) {
  color: var(--theme-heading);
}

:where([class^="thm-"], [class*=" thm-"]) a,
:where([class^="thm-"], [class*=" thm-"]) a:visited {
  color: var(--theme-link);
  text-decoration-color: currentColor;
}

:where([class^="thm-"], [class*=" thm-"]) a:hover,
:where([class^="thm-"], [class*=" thm-"]) a:focus-visible,
:where([class^="thm-"], [class*=" thm-"]) a:visited:hover,
:where([class^="thm-"], [class*=" thm-"]) a:visited:focus-visible {
  background-color: var(--theme-link-hover-bg);
  color: var(--theme-link-hover-text);
  text-decoration-color: transparent;
}

[class^="thm-"] li::marker,
[class*=" thm-"] li::marker,
[class^="thm-"] summary::marker,
[class*=" thm-"] summary::marker,
:where([class^="thm-"], [class*=" thm-"]) .list-circle li::before,
:where([class^="thm-"], [class*=" thm-"]) [class*="icon--"]::before {
  color: var(--theme-accent);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(button, input[type="button"], input[type="submit"], input[type="reset"], .btn-primary) {
  background-color: var(--theme-button-primary-bg);
  color: var(--theme-button-primary-text);
  border: solid var(--bs-sm) var(--theme-button-primary-border);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(button, input[type="button"], input[type="submit"], input[type="reset"], .btn-primary):hover,
:where([class^="thm-"], [class*=" thm-"]) 
:is(button, input[type="button"], input[type="submit"], input[type="reset"], .btn-primary):focus-visible {
  background-color: var(--theme-button-primary-hover-bg);
  color: var(--theme-button-primary-hover-text);
  border-color: var(--theme-button-primary-hover-border);
}

:where([class^="thm-"], [class*=" thm-"]) .btn-secondary {
  background-color: var(--theme-button-secondary-bg);
  color: var(--theme-button-secondary-text);
  border: solid var(--bs-sm) var(--theme-button-secondary-border);
}

:where([class^="thm-"], [class*=" thm-"]) .btn-secondary:hover,
:where([class^="thm-"], [class*=" thm-"]) .btn-secondary:focus-visible {
  background-color: var(--theme-button-secondary-hover-bg);
  color: var(--theme-button-secondary-hover-text);
  border-color: var(--theme-button-secondary-hover-border);
}

:where([class^="thm-"], [class*=" thm-"]) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]),
:where([class^="thm-"], [class*=" thm-"]) select,
:where([class^="thm-"], [class*=" thm-"]) textarea {
  background-color: var(--theme-bg);
  color: var(--theme-text);
  border: solid var(--bs-sm) var(--theme-border);
}

:where([class^="thm-"], [class*=" thm-"]) input[type="file"] {
  color: var(--theme-text);
}

:where([class^="thm-"], [class*=" thm-"]) input[type="file"]::file-selector-button {
  background-color: var(--theme-button-primary-bg);
  color: var(--theme-button-primary-text);
  border: solid var(--bs-sm) var(--theme-button-primary-border);
}

:where([class^="thm-"], [class*=" thm-"]) input[type="file"]::file-selector-button:hover,
:where([class^="thm-"], [class*=" thm-"]) input[type="file"]::file-selector-button:focus-visible {
  background-color: var(--theme-button-primary-hover-bg);
  color: var(--theme-button-primary-hover-text);
  border-color: var(--theme-button-primary-hover-border);
}

:where([class^="thm-"], [class*=" thm-"]) input::placeholder,
:where([class^="thm-"], [class*=" thm-"]) textarea::placeholder {
  color: var(--theme-text);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(input[type="checkbox"], input[type="radio"], input[type="range"], progress, meter) {
  accent-color: var(--theme-accent);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(input[type="checkbox"], input[type="radio"]) {
  background-color: var(--theme-bg);
  border-color: var(--theme-border);
  color: var(--theme-accent);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(input[type="checkbox"], input[type="radio"]):checked {
  border-color: var(--theme-accent);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(input[type="checkbox"], input[type="radio"]):hover {
  border-color: var(--theme-accent);
}

:where([class^="thm-"], [class*=" thm-"]) 
:is(input[type="checkbox"], input[type="radio"]):focus-visible {
  outline-color: var(--theme-accent);
}

:where([class^="thm-"], [class*=" thm-"]) table {
  background-color: var(--theme-surface);
  color: var(--theme-text);
  border-color: var(--theme-border);
}

:where([class^="thm-"], [class*=" thm-"]) thead {
  background-color: var(--theme-bg);
  color: var(--theme-heading);
}

:where([class^="thm-"], [class*=" thm-"]) thead th {
  color: var(--theme-heading);
  border-color: var(--theme-border);
}

:where([class^="thm-"], [class*=" thm-"]) :is(td, th, tr) {
  border-color: var(--theme-border);
}

:where([class^="thm-"], [class*=" thm-"]) tbody th {
  color: var(--theme-heading);
}

:where([class^="thm-"], [class*=" thm-"]) tbody tr:nth-child(even) {
  background-color: var(--theme-bg);
}

:where([class^="thm-"], [class*=" thm-"]) :is(code, kbd, samp, pre) {
  background-color: var(--theme-code-bg);
  color: var(--theme-code-text);
  border-color: var(--theme-border);
}

:where([class^="thm-"], [class*=" thm-"]) mark {
  background-color: var(--theme-highlight-bg);
  color: var(--theme-highlight-text);
}

[class^="thm-"]::selection,
[class*=" thm-"]::selection,
[class^="thm-"] ::selection,
[class*=" thm-"] ::selection {
  background-color: var(--theme-selection-bg);
  color: var(--theme-selection-text);
}

:where([class^="thm-"], [class*=" thm-"]) blockquote {
  background-color: var(--theme-surface);
  border-left-color: var(--theme-accent);
}

:where([class^="thm-"], [class*=" thm-"]) blockquote cite {
  color: var(--theme-text);
}

:where([class^="thm-"], [class*=" thm-"]) :focus-visible {
  outline-color: var(--theme-accent);
}

/* Light theme recipes */
.thm-uvu {
  --theme-bg: var(--uvu);
  --theme-surface: var(--uvu-800);
  --theme-text: var(--white);
  --theme-heading: var(--meadow);
  --theme-accent: var(--meadow);
  --theme-highlight-bg: var(--meadow);
  --theme-highlight-text: var(--black);
  --theme-selection-bg: var(--meadow);
  --theme-selection-text: var(--black);
  --theme-border: var(--uvu-300);
  --theme-link: var(--meadow);
  --theme-link-hover-bg: var(--bg-white-alpha-16);
  --theme-link-hover-text: var(--white);
  --theme-button-primary-bg: var(--meadow);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--meadow);
  --theme-button-primary-hover-bg: var(--meadow-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--meadow-100);
  --theme-button-secondary-text: var(--meadow);
  --theme-button-secondary-border: var(--meadow);
  --theme-button-secondary-hover-bg: var(--meadow-100);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--meadow-100);
}


/* Dark theme recipes */
[data-theme="dark"] .thm-uvu {
  --theme-bg: var(--uvu-950);
  --theme-surface: var(--uvu-900);
  --theme-text: var(--uvu-50);
  --theme-heading: var(--meadow);
  --theme-accent: var(--meadow);
  --theme-highlight-bg: var(--meadow);
  --theme-highlight-text: var(--black);
  --theme-selection-bg: var(--meadow);
  --theme-selection-text: var(--black);
  --theme-border: var(--uvu-500);
  --theme-link: var(--meadow);
  --theme-button-primary-bg: var(--meadow);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--meadow);
  --theme-button-primary-hover-bg: var(--meadow-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--meadow-100);
  --theme-button-secondary-text: var(--meadow);
  --theme-button-secondary-border: var(--meadow);
  --theme-button-secondary-hover-bg: var(--meadow);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--meadow);
}

.thm-wolverine {
  --theme-bg: var(--wolverine);
  --theme-surface: var(--wolverine-100);
  --theme-text: var(--black);
  --theme-heading: var(--black);
  --theme-accent: var(--black);
  --theme-border: var(--black);
  --theme-link: var(--black);
  --theme-link-hover-bg: var(--bg-white-alpha-32);
  --theme-link-hover-text: var(--black);
  --theme-button-primary-bg: var(--black);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--black);
  --theme-button-primary-hover-bg: var(--dark-green);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--dark-green);
  --theme-button-secondary-text: var(--black);
  --theme-button-secondary-border: var(--black);
  --theme-button-secondary-hover-bg: var(--black);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--black);
}

.thm-valley {
  --theme-bg: var(--valley);
  --theme-surface: var(--valley-100);
  --theme-text: var(--black);
  --theme-heading: var(--uvu-950);
  --theme-accent: var(--uvu-950);
  --theme-border: var(--valley-900);
  --theme-link: var(--uvu-950);
  --theme-link-hover-bg: var(--bg-white-alpha-32);
  --theme-link-hover-text: var(--black);
  --theme-button-primary-bg: var(--uvu-950);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--uvu-950);
  --theme-button-primary-hover-bg: var(--dark-green);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--dark-green);
  --theme-button-secondary-text: var(--uvu-950);
  --theme-button-secondary-border: var(--uvu-950);
  --theme-button-secondary-hover-bg: var(--uvu-950);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--uvu-950);
}

.thm-meadow {
  --theme-bg: var(--meadow);
  --theme-surface: var(--meadow-50);
  --theme-text: var(--black);
  --theme-heading: var(--uvu-950);
  --theme-accent: var(--uvu-950);
  --theme-border: var(--meadow-900);
  --theme-link: var(--uvu-950);
  --theme-link-hover-bg: var(--bg-white-alpha-48);
  --theme-link-hover-text: var(--black);
  --theme-button-primary-bg: var(--uvu-950);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--uvu-950);
  --theme-button-primary-hover-bg: var(--dark-green);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--dark-green);
  --theme-button-secondary-text: var(--uvu-950);
  --theme-button-secondary-border: var(--uvu-950);
  --theme-button-secondary-hover-bg: var(--uvu-950);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--uvu-950);
}

.thm-seahaze {
  --theme-bg: var(--seahaze);
  --theme-surface: var(--seahaze-50);
  --theme-text: var(--black);
  --theme-heading: var(--uvu-950);
  --theme-accent: var(--uvu-950);
  --theme-border: var(--seahaze-900);
  --theme-link: var(--uvu-950);
  --theme-link-hover-bg: var(--bg-white-alpha-48);
  --theme-link-hover-text: var(--black);
  --theme-button-primary-bg: var(--uvu-950);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--uvu-950);
  --theme-button-primary-hover-bg: var(--dark-green);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--dark-green);
  --theme-button-secondary-text: var(--uvu-950);
  --theme-button-secondary-border: var(--uvu-950);
  --theme-button-secondary-hover-bg: var(--uvu-950);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--uvu-950);
}

.thm-dark-green {
  --theme-bg: var(--dark-green);
  --theme-surface: var(--dark-green-900);
  --theme-text: var(--white);
  --theme-heading: var(--meadow-100);
  --theme-accent: var(--meadow);
  --theme-highlight-bg: var(--meadow);
  --theme-highlight-text: var(--black);
  --theme-selection-bg: var(--meadow);
  --theme-selection-text: var(--black);
  --theme-border: var(--dark-green-400);
  --theme-link: var(--meadow-100);
  --theme-link-hover-bg: var(--bg-white-alpha-16);
  --theme-link-hover-text: var(--white);
  --theme-button-primary-bg: var(--meadow);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--meadow);
  --theme-button-primary-hover-bg: var(--white);
  --theme-button-primary-hover-text: var(--dark-green);
  --theme-button-primary-hover-border: var(--white);
  --theme-button-secondary-text: var(--meadow);
  --theme-button-secondary-border: var(--meadow);
  --theme-button-secondary-hover-bg: var(--meadow);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--meadow);
}

.thm-super,
.thm-black,
.thm-dark-grey {
  --theme-bg: var(--super);
  --theme-surface: var(--super-800);
  --theme-text: var(--white);
  --theme-heading: var(--meadow-100);
  --theme-accent: var(--meadow);
  --theme-border: var(--super-400);
  --theme-link: var(--meadow-100);
  --theme-link-hover-bg: var(--bg-white-alpha-16);
  --theme-link-hover-text: var(--white);
  --theme-button-primary-bg: var(--meadow);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--meadow);
  --theme-button-primary-hover-bg: var(--white);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--white);
  --theme-button-secondary-text: var(--meadow);
  --theme-button-secondary-border: var(--meadow);
  --theme-button-secondary-hover-bg: var(--meadow);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--meadow);
}

.thm-black {
  --theme-bg: var(--black);
  --theme-surface: var(--super-950);
}

.thm-dark-grey {
  --theme-bg: var(--dark-grey);
  --theme-surface: var(--super);
}

.thm-white,
.thm-off-white,
.thm-light-grey,
.thm-warm {
  --theme-bg: var(--white);
  --theme-surface: var(--off-white);
  --theme-text: var(--dark-grey);
  --theme-heading: var(--uvu);
  --theme-accent: var(--uvu);
  --theme-border: var(--grey);
  --theme-link: var(--uvu);
  --theme-link-hover-bg: var(--seahaze-50);
  --theme-link-hover-text: var(--uvu-800);
  --theme-button-primary-bg: var(--uvu);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--uvu);
  --theme-button-primary-hover-bg: var(--wolverine-700);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--wolverine-700);
  --theme-button-secondary-text: var(--uvu);
  --theme-button-secondary-border: var(--uvu);
  --theme-button-secondary-hover-bg: var(--uvu);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--uvu);
}

.thm-off-white {
  --theme-bg: var(--off-white);
  --theme-surface: var(--white);
}

.thm-light-grey {
  --theme-bg: var(--light-grey);
  --theme-surface: var(--white);
  --theme-border: var(--super-700);
}

.thm-grey {
  --theme-bg: var(--grey);
  --theme-surface: var(--light-grey);
  --theme-text: var(--black);
  --theme-heading: var(--black);
  --theme-accent: var(--black);
  --theme-border: var(--black);
  --theme-link: var(--black);
  --theme-link-hover-bg: var(--bg-white-alpha-32);
  --theme-link-hover-text: var(--black);
  --theme-button-primary-bg: var(--black);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--black);
  --theme-button-primary-hover-bg: var(--dark-green);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--dark-green);
  --theme-button-secondary-text: var(--black);
  --theme-button-secondary-border: var(--black);
  --theme-button-secondary-hover-bg: var(--black);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--black);
}

.thm-warm {
  --theme-bg: var(--warm);
  --theme-surface: var(--white);
  --theme-border: var(--warm-700);
}

.thm-sage {
  --theme-bg: var(--sage);
  --theme-surface: var(--white);
  --theme-text: var(--dark-grey);
  --theme-heading: var(--dark-green);
  --theme-accent: var(--dark-green);
  --theme-border: var(--sage-700);
  --theme-link: var(--dark-green);
  --theme-link-hover-bg: var(--seahaze-50);
  --theme-link-hover-text: var(--uvu-800);
  --theme-button-primary-bg: var(--dark-green);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--dark-green);
  --theme-button-primary-hover-bg: var(--uvu);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--uvu);
  --theme-button-secondary-text: var(--dark-green);
  --theme-button-secondary-border: var(--dark-green);
  --theme-button-secondary-hover-bg: var(--dark-green);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--dark-green);
}

.thm-gold {
  --theme-bg: var(--gold);
  --theme-surface: var(--gold-50);
  --theme-text: var(--dark-grey);
  --theme-heading: var(--gold-900);
  --theme-accent: var(--gold-900);
  --theme-border: var(--gold-700);
  --theme-link: var(--gold-900);
  --theme-link-hover-bg: var(--bg-white-alpha-48);
  --theme-link-hover-text: var(--black);
  --theme-button-primary-bg: var(--gold-900);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--gold-900);
  --theme-button-primary-hover-bg: var(--black);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--black);
  --theme-button-secondary-text: var(--gold-900);
  --theme-button-secondary-border: var(--gold-900);
  --theme-button-secondary-hover-bg: var(--gold-900);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--gold-900);
}

.thm-red {
  --theme-bg: var(--red);
  --theme-surface: var(--red-50);
  --theme-text: var(--dark-grey);
  --theme-heading: var(--red-900);
  --theme-accent: var(--red-900);
  --theme-border: var(--red-700);
  --theme-link: var(--red-900);
  --theme-link-hover-bg: var(--bg-white-alpha-48);
  --theme-link-hover-text: var(--black);
  --theme-button-primary-bg: var(--red-900);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--red-900);
  --theme-button-primary-hover-bg: var(--black);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--black);
  --theme-button-secondary-text: var(--red-900);
  --theme-button-secondary-border: var(--red-900);
  --theme-button-secondary-hover-bg: var(--red-900);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--red-900);
}

.thm-info {
  --theme-bg: var(--info);
  --theme-surface: var(--info-50);
  --theme-text: var(--dark-grey);
  --theme-heading: var(--info-900);
  --theme-accent: var(--info-900);
  --theme-border: var(--info-700);
  --theme-link: var(--info-900);
  --theme-link-hover-bg: var(--bg-white-alpha-48);
  --theme-link-hover-text: var(--black);
  --theme-button-primary-bg: var(--info-900);
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--info-900);
  --theme-button-primary-hover-bg: var(--black);
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--black);
  --theme-button-secondary-text: var(--info-900);
  --theme-button-secondary-border: var(--info-900);
  --theme-button-secondary-hover-bg: var(--info-900);
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--info-900);
}



[data-theme="dark"] .thm-wolverine {
  --theme-bg: var(--wolverine-950);
  --theme-surface: var(--wolverine-900);
  --theme-text: var(--wolverine-50);
  --theme-heading: var(--wolverine-200);
  --theme-accent: var(--wolverine-300);
  --theme-border: var(--wolverine-500);
  --theme-link: var(--wolverine-200);
  --theme-button-primary-bg: var(--wolverine-300);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--wolverine-300);
  --theme-button-primary-hover-bg: var(--wolverine-200);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--wolverine-200);
  --theme-button-secondary-text: var(--wolverine-300);
  --theme-button-secondary-border: var(--wolverine-300);
  --theme-button-secondary-hover-bg: var(--wolverine-300);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--wolverine-300);
}

[data-theme="dark"] .thm-valley {
  --theme-bg: var(--valley-950);
  --theme-surface: var(--valley-900);
  --theme-text: var(--valley-50);
  --theme-heading: var(--valley-200);
  --theme-accent: var(--valley-300);
  --theme-border: var(--valley-500);
  --theme-link: var(--valley-200);
  --theme-button-primary-bg: var(--valley-300);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--valley-300);
  --theme-button-primary-hover-bg: var(--valley-200);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--valley-200);
  --theme-button-secondary-text: var(--valley-300);
  --theme-button-secondary-border: var(--valley-300);
  --theme-button-secondary-hover-bg: var(--valley-300);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--valley-300);
}

[data-theme="dark"] .thm-meadow {
  --theme-bg: var(--meadow-950);
  --theme-surface: var(--meadow-900);
  --theme-text: var(--meadow-50);
  --theme-heading: var(--meadow-100);
  --theme-accent: var(--meadow-200);
  --theme-border: var(--meadow-500);
  --theme-link: var(--meadow-100);
  --theme-button-primary-bg: var(--meadow-200);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--meadow-200);
  --theme-button-primary-hover-bg: var(--meadow-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--meadow-100);
  --theme-button-secondary-text: var(--meadow-200);
  --theme-button-secondary-border: var(--meadow-200);
  --theme-button-secondary-hover-bg: var(--meadow-200);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--meadow-200);
}

[data-theme="dark"] .thm-seahaze {
  --theme-bg: var(--seahaze-950);
  --theme-surface: var(--seahaze-900);
  --theme-text: var(--seahaze-50);
  --theme-heading: var(--seahaze-100);
  --theme-accent: var(--seahaze-200);
  --theme-border: var(--seahaze-400);
  --theme-link: var(--seahaze-100);
  --theme-button-primary-bg: var(--seahaze-200);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--seahaze-200);
  --theme-button-primary-hover-bg: var(--seahaze-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--seahaze-100);
  --theme-button-secondary-text: var(--seahaze-200);
  --theme-button-secondary-border: var(--seahaze-200);
  --theme-button-secondary-hover-bg: var(--seahaze-200);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--seahaze-200);
}

[data-theme="dark"] .thm-dark-green {
  --theme-bg: var(--dark-green-950);
  --theme-surface: var(--dark-green-900);
  --theme-text: var(--dark-green-50);
  --theme-heading: var(--seahaze-100);
  --theme-accent: var(--seahaze-200);
  --theme-border: var(--dark-green-400);
  --theme-link: var(--seahaze-100);
  --theme-button-primary-bg: var(--seahaze-200);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--seahaze-200);
  --theme-button-primary-hover-bg: var(--seahaze-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--seahaze-100);
  --theme-button-secondary-text: var(--seahaze-200);
  --theme-button-secondary-border: var(--seahaze-200);
  --theme-button-secondary-hover-bg: var(--seahaze-200);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--seahaze-200);
}

[data-theme="dark"] :is(.thm-super, .thm-black, .thm-dark-grey) {
  --theme-bg: var(--super-950);
  --theme-surface: var(--super-900);
  --theme-text: var(--off-white);
  --theme-heading: var(--meadow-100);
  --theme-accent: var(--meadow);
  --theme-border: var(--super-500);
  --theme-link: var(--meadow-100);
  --theme-button-primary-bg: var(--meadow);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--meadow);
  --theme-button-primary-hover-bg: var(--meadow-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--meadow-100);
  --theme-button-secondary-text: var(--meadow);
  --theme-button-secondary-border: var(--meadow);
  --theme-button-secondary-hover-bg: var(--meadow);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--meadow);
}

[data-theme="dark"] .thm-black {
  --theme-bg: var(--black);
  --theme-surface: var(--super-950);
}

[data-theme="dark"] .thm-dark-grey {
  --theme-bg: var(--dark-grey);
  --theme-surface: var(--super);
  --theme-border: var(--super-400);
}

[data-theme="dark"] :is(.thm-white, .thm-off-white, .thm-light-grey, .thm-grey) {
  --theme-bg: var(--super-950);
  --theme-surface: var(--super-900);
  --theme-text: var(--off-white);
  --theme-heading: var(--white);
  --theme-accent: var(--white);
  --theme-border: var(--super-500);
  --theme-link: var(--white);
  --theme-button-primary-bg: var(--white);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--white);
  --theme-button-primary-hover-bg: var(--off-white);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--off-white);
  --theme-button-secondary-text: var(--white);
  --theme-button-secondary-border: var(--white);
  --theme-button-secondary-hover-bg: var(--white);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--white);
}

[data-theme="dark"] .thm-off-white {
  --theme-heading: var(--off-white);
  --theme-accent: var(--off-white);
  --theme-button-primary-bg: var(--off-white);
  --theme-button-primary-border: var(--off-white);
  --theme-button-primary-hover-bg: var(--white);
  --theme-button-primary-hover-border: var(--white);
  --theme-button-secondary-text: var(--off-white);
  --theme-button-secondary-border: var(--off-white);
  --theme-button-secondary-hover-bg: var(--off-white);
  --theme-button-secondary-hover-border: var(--off-white);
}

[data-theme="dark"] .thm-light-grey {
  --theme-heading: var(--light-grey);
  --theme-accent: var(--light-grey);
  --theme-button-primary-bg: var(--light-grey);
  --theme-button-primary-border: var(--light-grey);
  --theme-button-secondary-text: var(--light-grey);
  --theme-button-secondary-border: var(--light-grey);
  --theme-button-secondary-hover-bg: var(--light-grey);
  --theme-button-secondary-hover-border: var(--light-grey);
}

[data-theme="dark"] .thm-grey {
  --theme-heading: var(--grey);
  --theme-accent: var(--grey);
  --theme-button-primary-bg: var(--grey);
  --theme-button-primary-border: var(--grey);
  --theme-button-secondary-text: var(--grey);
  --theme-button-secondary-border: var(--grey);
  --theme-button-secondary-hover-bg: var(--grey);
  --theme-button-secondary-hover-border: var(--grey);
}

[data-theme="dark"] .thm-warm {
  --theme-bg: var(--warm-950);
  --theme-surface: var(--warm-900);
  --theme-text: var(--warm-50);
  --theme-heading: var(--warm-200);
  --theme-accent: var(--warm-200);
  --theme-border: var(--warm-500);
  --theme-link: var(--warm-200);
  --theme-button-primary-bg: var(--warm-200);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--warm-200);
  --theme-button-primary-hover-bg: var(--warm-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--warm-100);
  --theme-button-secondary-text: var(--warm-200);
  --theme-button-secondary-border: var(--warm-200);
  --theme-button-secondary-hover-bg: var(--warm-200);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--warm-200);
}

[data-theme="dark"] .thm-sage {
  --theme-bg: var(--sage-950);
  --theme-surface: var(--sage-900);
  --theme-text: var(--sage-50);
  --theme-heading: var(--sage-200);
  --theme-accent: var(--sage-200);
  --theme-border: var(--sage-400);
  --theme-link: var(--sage-200);
  --theme-button-primary-bg: var(--sage-200);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--sage-200);
  --theme-button-primary-hover-bg: var(--sage-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--sage-100);
  --theme-button-secondary-text: var(--sage-200);
  --theme-button-secondary-border: var(--sage-200);
  --theme-button-secondary-hover-bg: var(--sage-200);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--sage-200);
}

[data-theme="dark"] .thm-gold {
  --theme-bg: var(--gold-950);
  --theme-surface: var(--gold-900);
  --theme-text: var(--gold-50);
  --theme-heading: var(--gold-200);
  --theme-accent: var(--gold-200);
  --theme-border: var(--gold-500);
  --theme-link: var(--gold-200);
  --theme-button-primary-bg: var(--gold-200);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--gold-200);
  --theme-button-primary-hover-bg: var(--gold-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--gold-100);
  --theme-button-secondary-text: var(--gold-200);
  --theme-button-secondary-border: var(--gold-200);
  --theme-button-secondary-hover-bg: var(--gold-200);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--gold-200);
}

[data-theme="dark"] .thm-red {
  --theme-bg: var(--red-950);
  --theme-surface: var(--red-900);
  --theme-text: var(--red-50);
  --theme-heading: var(--red-200);
  --theme-accent: var(--red-200);
  --theme-border: var(--red-400);
  --theme-link: var(--red-200);
  --theme-button-primary-bg: var(--red-200);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--red-200);
  --theme-button-primary-hover-bg: var(--red-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--red-100);
  --theme-button-secondary-text: var(--red-200);
  --theme-button-secondary-border: var(--red-200);
  --theme-button-secondary-hover-bg: var(--red-200);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--red-200);
}

[data-theme="dark"] .thm-info {
  --theme-bg: var(--info-950);
  --theme-surface: var(--info-900);
  --theme-text: var(--info-50);
  --theme-heading: var(--info-200);
  --theme-accent: var(--info-200);
  --theme-border: var(--info-500);
  --theme-link: var(--info-200);
  --theme-button-primary-bg: var(--info-200);
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--info-200);
  --theme-button-primary-hover-bg: var(--info-100);
  --theme-button-primary-hover-text: var(--black);
  --theme-button-primary-hover-border: var(--info-100);
  --theme-button-secondary-text: var(--info-200);
  --theme-button-secondary-border: var(--info-200);
  --theme-button-secondary-hover-bg: var(--info-200);
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--info-200);
}

/* Status theme recipes */
.thm-success,
.thm-warning,
.thm-error,
.thm-tip,
.thm-important,
.thm-feature,
.thm-hint,
.thm-cookie {
  --theme-bg: var(--status-bg, var(--surface-alt-bg));
  --theme-surface: var(--surface-bg);
  --theme-text: var(--status-text, var(--text));
  --theme-heading: var(--status-heading, var(--heading));
  --theme-accent: var(--status-icon, var(--accent));
  --theme-border: var(--status-border, var(--border));
  --theme-link: var(--status-link, var(--link-text));
  --theme-button-primary-bg: var(--status-heading, var(--button-primary-bg));
  --theme-button-primary-text: var(--white);
  --theme-button-primary-border: var(--status-heading, var(--button-primary-bg));
  --theme-button-primary-hover-bg: var(--status-text, var(--button-primary-hover-bg));
  --theme-button-primary-hover-text: var(--white);
  --theme-button-primary-hover-border: var(--status-text, var(--button-primary-hover-bg));
  --theme-button-secondary-text: var(--status-link, var(--link-text));
  --theme-button-secondary-border: var(--status-link, var(--link-text));
  --theme-button-secondary-hover-bg: var(--status-link, var(--link-text));
  --theme-button-secondary-hover-text: var(--white);
  --theme-button-secondary-hover-border: var(--status-link, var(--link-text));
}

.thm-success { --status-bg: var(--success-bg); --status-text: var(--success-text); --status-heading: var(--success-heading); --status-icon: var(--success-icon); --status-border: var(--success-border); --status-link: var(--success-link); }
.thm-warning { --status-bg: var(--warning-bg); --status-text: var(--warning-text); --status-heading: var(--warning-heading); --status-icon: var(--warning-icon); --status-border: var(--warning-border); --status-link: var(--warning-link); }
.thm-error { --status-bg: var(--error-bg); --status-text: var(--error-text); --status-heading: var(--error-heading); --status-icon: var(--error-icon); --status-border: var(--error-border); --status-link: var(--error-link); }
.thm-tip { --status-bg: var(--tip-bg); --status-text: var(--tip-text); --status-heading: var(--tip-heading); --status-icon: var(--tip-icon); --status-border: var(--tip-border); --status-link: var(--tip-link); }
.thm-important { --status-bg: var(--important-bg); --status-text: var(--important-text); --status-heading: var(--important-heading); --status-icon: var(--important-icon); --status-border: var(--important-border); --status-link: var(--important-link); }
.thm-feature { --status-bg: var(--feature-bg); --status-text: var(--feature-text); --status-heading: var(--feature-heading); --status-icon: var(--feature-icon); --status-border: var(--feature-border); --status-link: var(--feature-link); }
.thm-hint { --status-bg: var(--hint-bg); --status-text: var(--hint-text); --status-heading: var(--hint-heading); --status-icon: var(--hint-icon); --status-border: var(--hint-border); --status-link: var(--hint-link); }
.thm-cookie { --status-bg: var(--cookie-bg); --status-text: var(--cookie-text); --status-heading: var(--cookie-heading); --status-icon: var(--cookie-icon); --status-border: var(--cookie-border); --status-link: var(--cookie-link); }

[data-theme="dark"] :is(.thm-success, .thm-warning, .thm-error, .thm-tip, .thm-important, .thm-feature, .thm-hint, .thm-cookie) {
  --theme-surface: var(--surface-bg);
  --theme-button-primary-bg: var(--status-icon, var(--accent));
  --theme-button-primary-text: var(--black);
  --theme-button-primary-border: var(--status-icon, var(--accent));
  --theme-button-primary-hover-bg: var(--status-heading, var(--text));
  --theme-button-primary-hover-text: var(--status-bg, var(--canvas-bg));
  --theme-button-primary-hover-border: var(--status-heading, var(--text));
  --theme-button-secondary-text: var(--status-icon, var(--accent));
  --theme-button-secondary-border: var(--status-icon, var(--accent));
  --theme-button-secondary-hover-bg: var(--status-icon, var(--accent));
  --theme-button-secondary-hover-text: var(--black);
  --theme-button-secondary-hover-border: var(--status-icon, var(--accent));
}

/* Theme button hover cleanup
   Primary and secondary buttons share the same solid hover fill inside themes.
   The hover border matches the hover background.
*/
:where([class^="thm-"], [class*=" thm-"])
  :is(button, input[type="button"], input[type="submit"], input[type="reset"], .btn-primary):where(:not(:disabled):not([aria-disabled="true"])):hover,
:where([class^="thm-"], [class*=" thm-"])
  .btn-secondary:where(:not(:disabled):not([aria-disabled="true"])):hover {
  background-color: var(--theme-button-primary-hover-bg);
  color: var(--theme-button-primary-hover-text);
  border-color: var(--theme-button-primary-hover-bg);
}

/* Global primary/secondary button hover fade */
:is(button, input[type="button"], input[type="submit"], input[type="reset"], .btn-primary, .btn-secondary) {
  transition:
    background-color 400ms ease,
    border-color 400ms ease,
    color 400ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :is(button, input[type="button"], input[type="submit"], input[type="reset"], .btn-primary, .btn-secondary) {
    transition: none;
  }
}