/*
 * Per-product-line theming for the public funnel pages (subscribe / support /
 * supporter and their outcomes).
 *
 * Why this isn't Tailwind: the bundle is purged, so a class only exists if it's
 * already written somewhere — and a brand-dependent class name can't be, because
 * the brand is chosen at request time. These rules read CSS custom properties
 * that App\Support\Brand::cssVars() writes onto the element, so one static
 * stylesheet themes every line.
 *
 * The class list mirrors the red-* utilities those pages actually used, so the
 * Kokoro rendering is unchanged (its ramp is Tailwind's red).
 *
 * Adding a shade here means adding it to Brand::$scale too.
 */

.bg-brand-50            { background-color: var(--brand-50); }
.bg-brand-100           { background-color: var(--brand-100); }
.bg-brand-500           { background-color: var(--brand-500); }

.text-brand-400         { color: var(--brand-400); }
.text-brand-500         { color: var(--brand-500); }
.text-brand-600         { color: var(--brand-600); }
.text-brand-700         { color: var(--brand-700); }

.border-brand-100       { border-color: var(--brand-100); }
.border-brand-200       { border-color: var(--brand-200); }
.border-brand-400       { border-color: var(--brand-400); }
.border-brand-500       { border-color: var(--brand-500); }

.shadow-brand-200       { --tw-shadow-color: var(--brand-200); --tw-shadow: var(--tw-shadow-colored); }

.hover\:text-brand-500:hover   { color: var(--brand-500); }
.hover\:text-brand-600:hover   { color: var(--brand-600); }
.hover\:border-brand-400:hover { border-color: var(--brand-400); }

.focus\:border-brand-500:focus { border-color: var(--brand-500); }
.focus\:ring-brand-300:focus   { --tw-ring-color: var(--brand-200); box-shadow: 0 0 0 3px var(--brand-200); }
.focus\:ring-brand-500:focus   { --tw-ring-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-200); }

/* Hero band. Replaces `bg-gradient-to-b from-rose-50 to-white` — Tailwind's
   gradient stops are their own custom properties, so a whole-rule fade is
   simpler (and less brittle) than re-plumbing --tw-gradient-*. */
.bg-brand-fade { background-image: linear-gradient(to bottom, var(--brand-50), #fff); }

/* Primary action. Kokoro's accent is its red-500, so nothing shifts there;
   mapskuro deliberately acts in water blue on its olive page. */
.bg-brand-accent              { background-color: var(--brand-accent); }
.hover\:bg-brand-accent:hover { background-color: var(--brand-accent-hover); }
.text-brand-accent            { color: var(--brand-accent); }