/* ===========================================================================
   Contrast layer
   ---------------------------------------------------------------------------
   The palette is chosen by the super admin, so a template that says
   `text-primary` cannot know whether primary is light or dark, or what surface
   it will land on. When a dark primary meets a dark panel, the text vanishes.

   This layer never changes the configured colours. It substitutes a derived
   variant of the same hue only where the raw colour would be unreadable, so
   the brand still reads as the brand and the text is always visible.

   Variants are computed per request in includes/head.php from the live theme
   (theme_contrast_palette() in includes/helpers.php).

   Two mechanics to know:

   1. Tailwind's Play CDN injects its stylesheet after our <link>, so a rule
      that merely matches a utility by name loses on source order. Rules that
      need to beat a same-named utility are prefixed with `html` (0,1,1).

   2. The :not([class^="bg-"]):not([class*=" bg-"]) guard means "this element
      does not paint its own background". It deliberately ignores prefixed
      variants such as `hover:bg-primary`, which do not paint at rest. Without
      it, a `bg-white text-primary` button inside a dark hero would be
      recoloured for the hero rather than for its own white background.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Brand colour used as TEXT on a dark surface
   --------------------------------------------------------------------------- */

html .bg-background-dark .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-background-dark [class*="text-primary/"]:not([class^="bg-"]):not([class*=" bg-"]),
html .frame-3d--dark .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-slate-950 .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-slate-900 .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-slate-800 .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-zinc-900 .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-zinc-800 .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-black .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html #gateway-loader .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-slate-950.text-primary,
html .bg-slate-900.text-primary,
html .bg-slate-800.text-primary,
html .bg-zinc-900.text-primary,
html .bg-zinc-800.text-primary,
html .bg-background-dark.text-primary {
    color: var(--theme-primary-on-dark);
}

html footer .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html footer [class*="text-primary/"]:not([class^="bg-"]):not([class*=" bg-"]) {
    color: var(--theme-primary-on-footer);
}

html .bg-background-dark .text-accent:not([class^="bg-"]):not([class*=" bg-"]),
html .frame-3d--dark .text-accent:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-slate-900 .text-accent:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-slate-950 .text-accent:not([class^="bg-"]):not([class*=" bg-"]),
html footer .text-accent:not([class^="bg-"]):not([class*=" bg-"]) {
    color: var(--theme-accent-on-dark);
}

/* ---------------------------------------------------------------------------
   2. Light chips inside a dark region
   A control that brings its own light background is a light surface, whatever
   it happens to be sitting on.
   --------------------------------------------------------------------------- */

html .bg-white .text-primary,
html .bg-white.text-primary,
html .bg-slate-50 .text-primary,
html .bg-slate-50.text-primary,
html .bg-slate-100 .text-primary,
html .bg-slate-100.text-primary {
    color: var(--theme-primary-on-light);
}

html .bg-white.text-background-dark,
html .bg-white .text-background-dark,
html .bg-slate-50.text-background-dark,
html .bg-slate-100.text-background-dark {
    color: #0E1714;
}

/* ---------------------------------------------------------------------------
   3. Text sitting ON a brand-coloured block
   The markup assumes either a light block (dark text) or a dark one (white
   text). Neither holds for an arbitrary palette, so both are replaced with an
   ink chosen against the actual colour.
   --------------------------------------------------------------------------- */

html .bg-primary {
    color: var(--theme-ink-on-primary);
}

html .bg-primary.text-primary,
html .bg-primary.text-white,
html .bg-primary.text-black,
html .bg-primary.text-slate-900,
html .bg-primary.text-slate-950,
html .bg-primary.text-background-dark,
html .bg-primary .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary .text-background-dark:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary .text-slate-900:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary .text-slate-950:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary .text-black:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary .text-white:not([class^="bg-"]):not([class*=" bg-"]) {
    color: var(--theme-ink-on-primary);
}

html .bg-primary [class*="text-background-dark/"]:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary [class*="text-white/"]:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary [class*="text-slate-900/"]:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary .text-slate-300:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary .text-slate-400:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary .text-slate-500:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-primary .text-slate-600:not([class^="bg-"]):not([class*=" bg-"]) {
    color: var(--theme-ink-on-primary-soft);
}

html .bg-secondary {
    color: var(--theme-ink-on-secondary);
}

html .bg-secondary.text-primary,
html .bg-secondary.text-white,
html .bg-secondary.text-slate-900,
html .bg-secondary.text-slate-950,
html .bg-secondary.text-background-dark,
html .bg-secondary .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-secondary .text-white:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-secondary .text-slate-900:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-secondary .text-background-dark:not([class^="bg-"]):not([class*=" bg-"]) {
    color: var(--theme-ink-on-secondary);
}

html .bg-accent {
    color: var(--theme-ink-on-accent);
}

html .bg-accent.text-primary,
html .bg-accent.text-white,
html .bg-accent.text-slate-900,
html .bg-accent .text-primary:not([class^="bg-"]):not([class*=" bg-"]),
html .bg-accent .text-white:not([class^="bg-"]):not([class*=" bg-"]) {
    color: var(--theme-ink-on-accent);
}

/* Hover states that swap in a brand background need the matching ink. */
html .hover\:bg-primary:hover {
    color: var(--theme-ink-on-primary);
}

html .hover\:bg-secondary:hover {
    color: var(--theme-ink-on-secondary);
}

/* ---------------------------------------------------------------------------
   4. Brand colour used as TEXT on a light surface
   Only bites when the configured colour is too light to read on white.
   --------------------------------------------------------------------------- */

html .text-secondary {
    color: var(--theme-secondary-on-light);
}

html .bg-background-dark .text-secondary,
html .frame-3d--dark .text-secondary,
html .bg-slate-900 .text-secondary,
html .bg-slate-950 .text-secondary,
html .bg-slate-800 .text-secondary,
html .bg-zinc-900 .text-secondary,
html .bg-primary .text-secondary,
html footer .text-secondary,
html #gateway-loader .text-secondary,
html .bg-slate-900.text-secondary,
html .bg-background-dark.text-secondary {
    color: var(--theme-secondary-on-dark);
}

/* ---------------------------------------------------------------------------
   5. Muted greys
   slate/zinc 300-500 fall below AA for body copy on white. Darkened for light
   surfaces, and restored to a lighter tone on dark ones where they belong.
   --------------------------------------------------------------------------- */

html .text-slate-400,
html .text-zinc-400,
html .text-slate-300,
html .text-zinc-300 {
    color: var(--theme-muted-on-light);
}

html .text-slate-500,
html .text-zinc-500 {
    color: #56637A;
}

html .bg-background-dark .text-slate-400,
html .bg-background-dark .text-slate-500,
html .bg-background-dark .text-slate-300,
html .bg-background-dark .text-zinc-400,
html .bg-background-dark .text-zinc-500,
html .frame-3d--dark .text-slate-400,
html .frame-3d--dark .text-slate-500,
html .frame-3d--dark .text-slate-300,
html .bg-slate-950 .text-slate-400,
html .bg-slate-950 .text-slate-500,
html .bg-slate-950 .text-slate-300,
html .bg-slate-900 .text-slate-400,
html .bg-slate-900 .text-slate-500,
html .bg-slate-900 .text-slate-300,
html .bg-slate-800 .text-slate-400,
html .bg-slate-800 .text-slate-500,
html .bg-zinc-900 .text-zinc-400,
html .bg-zinc-900 .text-zinc-500,
html .bg-zinc-900 .text-slate-400,
html .bg-zinc-800 .text-zinc-400,
html .bg-zinc-800 .text-zinc-500,
html .bg-black .text-slate-400,
html .bg-black .text-slate-500,
html #gateway-loader .text-slate-400,
html footer .text-slate-400,
html footer .text-slate-500,
html footer .text-slate-300,
html .bg-slate-900.text-slate-300,
html .bg-slate-900.text-slate-400,
html .bg-slate-950.text-slate-300,
html .bg-slate-800.text-slate-400,
html .bg-zinc-900.text-zinc-400,
html .bg-background-dark.text-slate-300,
html .bg-background-dark.text-slate-400 {
    color: #B6C1CE;
}

/* Very faint white overlays on dark surfaces. */
html .bg-background-dark .text-white\/40,
html .bg-background-dark .text-white\/50,
html .frame-3d--dark .text-white\/40,
html .frame-3d--dark .text-white\/50,
html .bg-slate-900 .text-white\/40,
html .bg-slate-900 .text-white\/50,
html .bg-primary .text-white\/40,
html .bg-primary .text-white\/50,
html footer .text-white\/40,
html footer .text-white\/50 {
    color: rgba(255, 255, 255, 0.72);
}

/* 40-50% white is unreadable on anything that is not clearly dark. Raise it
   everywhere else and let the dark-surface rule above win where it applies. */
html .text-white\/40,
html .text-white\/50 {
    color: rgba(255, 255, 255, 0.82);
}

/* Placeholder text is secondary but still has to be legible. */
html input::placeholder,
html textarea::placeholder {
    color: var(--theme-muted-on-light);
    opacity: 1;
}

/* ---------------------------------------------------------------------------
   6. Escape hatch
   Mark an element .contrast-exempt to opt it out of everything above.
   --------------------------------------------------------------------------- */

.contrast-exempt,
.contrast-exempt * {
    color: revert-layer;
}