/**
 * Public content page accent utilities.
 *
 * Like landing-accents.css: `assets/css/tailwind.css` is a vendored, prebuilt
 * bundle, so colour classes added to the content pages after it was compiled
 * render as nothing. The public pages are always dark, which left hero text
 * white on a light background and coloured labels too dim to read.
 *
 * Part 1 supplies the missing `dark:` utilities the templates already use.
 * Part 2 lightens accent text that sits on the dark backgrounds; it skips
 * white buttons and hover states so those keep their own styling.
 */

@layer utilities {
    .dark\:border-blue-800:is(.dark *) {
      --tw-border-opacity: 1;
      border-color: rgb(30 64 175 / var(--tw-border-opacity, 1))
    }
    
    .dark\:border-emerald-800:is(.dark *) {
      --tw-border-opacity: 1;
      border-color: rgb(6 95 70 / var(--tw-border-opacity, 1))
    }
    
    .dark\:border-purple-800:is(.dark *) {
      --tw-border-opacity: 1;
      border-color: rgb(107 33 168 / var(--tw-border-opacity, 1))
    }
    
    .dark\:border-red-800:is(.dark *) {
      --tw-border-opacity: 1;
      border-color: rgb(153 27 27 / var(--tw-border-opacity, 1))
    }
    
    .dark\:border-slate-700:is(.dark *) {
      --tw-border-opacity: 1;
      border-color: rgb(51 65 85 / var(--tw-border-opacity, 1))
    }
    
    .dark\:bg-amber-900\/20:is(.dark *) {
      background-color: rgb(120 53 15 / 0.2)
    }
    
    .dark\:bg-blue-900\/20:is(.dark *) {
      background-color: rgb(30 58 138 / 0.2)
    }
    
    .dark\:bg-emerald-900\/20:is(.dark *) {
      background-color: rgb(6 78 59 / 0.2)
    }
    
    .dark\:bg-purple-900\/20:is(.dark *) {
      background-color: rgb(88 28 135 / 0.2)
    }
    
    .dark\:bg-red-900\/20:is(.dark *) {
      background-color: rgb(127 29 29 / 0.2)
    }
    
    .dark\:bg-slate-800\/30:is(.dark *) {
      background-color: rgb(30 41 59 / 0.3)
    }
    
    .dark\:bg-slate-800\/50:is(.dark *) {
      background-color: rgb(30 41 59 / 0.5)
    }
    
    .dark\:bg-slate-900\/50:is(.dark *) {
      background-color: rgb(15 23 42 / 0.5)
    }
    
    .dark\:text-purple-400:is(.dark *) {
      --tw-text-opacity: 1;
      color: rgb(192 132 252 / var(--tw-text-opacity, 1))
    }
    
    .dark\:text-red-400:is(.dark *) {
      --tw-text-opacity: 1;
      color: rgb(248 113 113 / var(--tw-text-opacity, 1))
    }
    .dark .text-primary:not(.bg-white):not(:hover) { color: rgb(167 139 250); }
    .dark .text-blue-600:not(:hover) { color: rgb(96 165 250); }
    .dark .text-purple-600:not(:hover) { color: rgb(192 132 252); }
    .dark .text-emerald-600:not(:hover) { color: rgb(52 211 153); }
    .dark .text-amber-600:not(:hover) { color: rgb(251 191 36); }
    .dark .text-red-600:not(:hover) { color: rgb(248 113 113); }
    .dark .text-slate-500:not(:hover) { color: rgb(148 163 184); }
}