/* ============================================================
   Dynamic theme layer.

   Loaded AFTER the compiled Tailwind stylesheet so every rule here
   wins over the build-time defaults. Nothing in this file contains a
   hardcoded brand colour: all values resolve to the CSS variables that
   includes/layout.php prints from the `theme` settings row, so the
   admin palette applies instantly on every page.
   ============================================================ */

/* Page canvas + base text ---------------------------------- */
body {
  background-color: var(--brand-bg);
  color: var(--brand-text);
}

::selection {
  background-color: var(--brand);
  color: var(--brand-button-text);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--brand);
}

/* Primary / brand buttons ---------------------------------- */
.btn-brand,
.btn-brand:visited {
  background-color: var(--brand-button);
  color: var(--brand-button-text);
  border-color: var(--brand-button);
}

.btn-brand:hover,
.btn-brand:focus-visible {
  background-color: var(--brand-button-hover);
  color: var(--brand-button-text);
}

.btn-brand:disabled,
.btn-brand[disabled] {
  background-color: var(--brand-button);
}

/* Secondary / outline buttons that should follow the brand --- */
.btn-brand-outline,
.btn-brand-outline:visited {
  border-color: var(--brand-button);
  color: var(--brand-button);
  background-color: transparent;
}

.btn-brand-outline:hover,
.btn-brand-outline:focus-visible {
  background-color: var(--brand-button-hover);
  color: var(--brand-button-text);
  border-color: var(--brand-button-hover);
}

/* Links ----------------------------------------------------- */
.link-brand,
.prose a,
.rte-content a {
  color: var(--brand-link);
}

.link-brand:hover,
.prose a:hover,
.rte-content a:hover {
  color: var(--brand-link-hover);
}

/* Compiled utilities that must follow the admin palette ------
   These classes exist in the compiled Tailwind bundle with static
   values; re-pointing them here keeps the markup untouched while
   making the colours dynamic. */
.hover\:bg-primary\/90:hover,
.hover\:bg-primary\/80:hover {
  background-color: var(--brand-button-hover);
}

.hover\:text-\[var\(--brand\)\]:hover {
  color: var(--brand);
}

/* Form focus states ----------------------------------------- */
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: var(--brand);
}

/* Header / navbar --------------------------------------------
   Background and foreground come from the admin palette
   (--brand-header / --brand-header-text). When no header colour is
   saved, layout.php emits the original translucent white bar, so the
   default design is unchanged. The foreground is picked by contrast so
   menu text, logo, icons and buttons stay readable on any background —
   identical on desktop, tablet and mobile. */
.site-header {
  background-color: var(--brand-header);
  color: var(--brand-header-text);
  border-color: var(--brand-header-border);
}

.site-header .site-brand-name,
.site-header nav a,
.site-header .site-actions a {
  color: var(--brand-header-text);
}

.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: var(--brand);
}

.site-header .site-header-btn {
  border-color: var(--brand-header-border);
  color: var(--brand-header-text);
  background-color: transparent;
}

.site-header .site-header-btn:hover,
.site-header .site-header-btn:focus-visible {
  background-color: color-mix(in srgb, var(--brand-header-text) 10%, transparent);
  color: var(--brand-header-text);
}

/* The primary CTA keeps its own button palette. */
.site-header .btn-brand,
.site-header .btn-brand:hover {
  color: var(--brand-button-text);
}