/*
 * Site themes — the token bridge for APP pages (themes/_base/app.php): sign-in, account, cart,
 * checkout, store, membership, tickets, volunteer, help, /shop. Those pages keep their own markup,
 * which paints with Tailwind greys/whites/indigo and a few legacy brand variables; on a themed app
 * page (body.zt-app) this sheet re-points them at the market's template tokens (--z-*), so the
 * template's colours, fonts and Light / Dark / Auto reach them without touching their layout.
 *
 * Rules
 *   - Token-only. Never a [data-zin-mode] or prefers-color-scheme selector (Auto swaps the tokens).
 *   - The shared header (nav) and footer (.zt-site-footer) are chrome.css's job: every rule here
 *     skips them with :not(nav *, .zt-site-footer *).
 *   - Status colours (green/red/amber/blue-50 alerts) are left alone: light boxes with dark words
 *     read in both modes.
 *   - A page family's own CSS classes are re-pointed in app/{key}.css, never here.
 * Never loaded on legacy pages.
 */

/* ---- Page, type, legacy brand variables ------------------------------------------------- */
body.zt-app {
    background: var(--z-bg) !important;
    color: var(--z-text);
    font-family: var(--z-font-body, inherit);
    /* The names these pages use for the brand colour, all pointed at the template's action colour. */
    --primary-color: var(--z-accent);
    --secondary-color: var(--z-accent-2);
    --accent-color: var(--z-accent-2);
    --primary: var(--z-accent);
    --brand: var(--z-accent);
    --tenant-primary: var(--z-accent);
}
body.zt-app > main,
body.zt-app main.min-h-screen { background: transparent; }
body.zt-app :is(h1, h2, h3):not(nav *, .zt-site-footer *) { font-family: var(--z-font-display, inherit); font-synthesis: none; }   /* display faces shipped in one weight (Market Day's DM Serif) are never faux-bolded */

/* ---- Surfaces ---------------------------------------------------------------------------- */
body.zt-app :is(.bg-white, [class*="bg-white/"]):not(nav *, .zt-site-footer *) { background-color: var(--z-surface) !important; }
body.zt-app :is(.bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100, [class*="bg-gray-50/"], [class*="bg-gray-100/"]):not(nav *, .zt-site-footer *) { background-color: var(--z-surface-2) !important; }
body.zt-app :is(.bg-gray-200, .bg-slate-200, .bg-gray-300, .bg-slate-300):not(nav *, .zt-site-footer *) { background-color: var(--z-border) !important; }
/* A full-height grey page wrapper is the page, not a panel: it shows the page colour so cards stay the lighter layer. */
body.zt-app .min-h-screen:is(.bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100):not(nav *, .zt-site-footer *) { background-color: var(--z-bg) !important; }
body.zt-app :is(.hover\:bg-white, .hover\:bg-gray-50, .hover\:bg-gray-100, .hover\:bg-slate-50, .hover\:bg-slate-100):not(nav *, .zt-site-footer *):hover { background-color: var(--z-surface-2) !important; }
body.zt-app :is(.hover\:bg-gray-200, .hover\:bg-gray-300, .hover\:bg-slate-200, .hover\:bg-slate-300):not(nav *, .zt-site-footer *):hover { background-color: var(--z-border) !important; }
/* "Ink" blocks (dark buttons, badges) invert with the page so they never vanish on a dark one. */
body.zt-app :is(.bg-gray-600, .bg-gray-700, .bg-gray-800, .bg-gray-900, .bg-slate-600, .bg-slate-700, .bg-slate-800, .bg-slate-900, .bg-black):not([class*="bg-opacity-"]):not(nav *, .zt-site-footer *) { background-color: var(--z-text) !important; color: var(--z-bg) !important; }
body.zt-app :is(.bg-gray-600, .bg-gray-700, .bg-gray-800, .bg-gray-900, .bg-slate-600, .bg-slate-700, .bg-slate-800, .bg-slate-900, .bg-black):not(nav *, .zt-site-footer *) :is(.text-white, .text-gray-100, .text-gray-200, .text-gray-300) { color: var(--z-bg) !important; }
body.zt-app :is(.hover\:bg-gray-600, .hover\:bg-gray-700, .hover\:bg-gray-800, .hover\:bg-black):not(nav *, .zt-site-footer *):hover { background-color: var(--z-muted) !important; color: var(--z-bg) !important; }

/* Gradients built from white/grey stops follow the page. */
body.zt-app :is(.from-white, .from-gray-50, .from-gray-100, .from-slate-50):not(nav *, .zt-site-footer *) { --tw-gradient-from: var(--z-bg) var(--tw-gradient-from-position, ); --tw-gradient-to: transparent var(--tw-gradient-to-position, ); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
body.zt-app :is(.via-white, .via-gray-50):not(nav *, .zt-site-footer *) { --tw-gradient-stops: var(--tw-gradient-from), var(--z-bg) var(--tw-gradient-via-position, ), var(--tw-gradient-to); }
body.zt-app :is(.to-white, .to-gray-50, .to-gray-100, .to-slate-50):not(nav *, .zt-site-footer *) { --tw-gradient-to: var(--z-surface-2) var(--tw-gradient-to-position, ); }

/* ---- Text -------------------------------------------------------------------------------- */
body.zt-app :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700, .text-black):not(nav *, .zt-site-footer *) { color: var(--z-text) !important; }
body.zt-app :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500, .text-slate-400):not(nav *, .zt-site-footer *) { color: var(--z-muted) !important; }
body.zt-app :is(.hover\:text-gray-900, .hover\:text-gray-800, .hover\:text-gray-700):not(nav *, .zt-site-footer *):hover { color: var(--z-text) !important; }

/* ---- Lines ------------------------------------------------------------------------------- */
body.zt-app :is(.border-gray-100, .border-gray-200, .border-gray-300, .border-slate-100, .border-slate-200, .border-slate-300, .border-white):not(nav *, .zt-site-footer *) { border-color: var(--z-border) !important; }
body.zt-app :is(.divide-gray-100, .divide-gray-200, .divide-gray-300, .divide-slate-200):not(nav *, .zt-site-footer *) > :not([hidden]) ~ :not([hidden]) { border-color: var(--z-border) !important; }
body.zt-app :is(.ring-gray-100, .ring-gray-200, .ring-gray-300, .ring-black):not(nav *, .zt-site-footer *) { --tw-ring-color: var(--z-border) !important; }
body.zt-app hr:not(nav *, .zt-site-footer *) { border-color: var(--z-border); }
/* Borders with no colour class take Tailwind's light grey (#e5e7eb) — a bright line on a dark page.
   Class weight (0,1,0) on purpose: an explicit border colour class (printed later by Tailwind) still wins. */
:where(body.zt-app) :is(.border, .border-t, .border-b, .border-l, .border-r, .border-x, .border-y, .border-2, .border-4):where(:not(nav *, .zt-site-footer *)) { border-color: var(--z-border); }
:where(body.zt-app) :is(.divide-y, .divide-x):where(:not(nav *, .zt-site-footer *)) > :where(:not([hidden]) ~ :not([hidden])) { border-color: var(--z-border); }

/* ---- Brand stand-ins (indigo / blue utilities used as "the" button colour) --------------- */
body.zt-app :is(.bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-tenant-primary):not(nav *, .zt-site-footer *) { background-color: var(--z-accent) !important; color: var(--z-accent-ink) !important; }
body.zt-app :is(.bg-indigo-500, .bg-indigo-600, .bg-indigo-700, .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-tenant-primary):not(nav *, .zt-site-footer *) :is(.text-white, i, svg) { color: var(--z-accent-ink) !important; }
body.zt-app :is(.hover\:bg-indigo-600, .hover\:bg-indigo-700, .hover\:bg-indigo-800, .hover\:bg-blue-600, .hover\:bg-blue-700, .hover\:bg-blue-800):not(nav *, .zt-site-footer *):hover { background-color: var(--z-accent) !important; filter: brightness(.94); }
body.zt-app :is(.text-indigo-500, .text-indigo-600, .text-indigo-700, .text-blue-500, .text-blue-600, .text-blue-700, .text-tenant-primary):not(nav *, .zt-site-footer *) { color: var(--z-accent-text) !important; }
body.zt-app :is(.hover\:text-indigo-500, .hover\:text-indigo-600, .hover\:text-indigo-700, .hover\:text-indigo-800, .hover\:text-blue-500, .hover\:text-blue-600, .hover\:text-blue-700, .hover\:text-blue-800):not(nav *, .zt-site-footer *):hover { color: var(--z-accent-text) !important; }
body.zt-app :is(.bg-indigo-50, .bg-indigo-100, .bg-blue-50, .bg-blue-100):not(nav *, .zt-site-footer *) { background-color: var(--z-accent-soft) !important; }
body.zt-app :is(.hover\:bg-indigo-50, .hover\:bg-indigo-100, .hover\:bg-blue-50, .hover\:bg-blue-100):not(nav *, .zt-site-footer *):hover { background-color: var(--z-accent-soft) !important; }
body.zt-app :is(.border-indigo-200, .border-indigo-300, .border-indigo-500, .border-indigo-600, .border-blue-200, .border-blue-300, .border-blue-500, .border-blue-600):not(nav *, .zt-site-footer *) { border-color: var(--z-accent) !important; }
body.zt-app :is(.focus\:ring-indigo-500, .focus\:ring-blue-500, .focus\:border-indigo-500, .focus\:border-blue-500):not(nav *, .zt-site-footer *):focus { --tw-ring-color: var(--z-accent) !important; border-color: var(--z-accent) !important; }
body.zt-app :is(.text-indigo-800, .text-indigo-900, .text-blue-800, .text-blue-900):not(nav *, .zt-site-footer *) { color: var(--z-accent-text) !important; }

/* ---- Light status boxes keep dark words ------------------------------------------------- */
/* Status tints (green/red/amber … -50/-100) stay light in both modes, so the greys inside them keep
   their legacy dark values instead of the page's text tokens (which turn light in dark mode). */
body.zt-app :is([class*="bg-green-50"], [class*="bg-green-100"], [class*="bg-emerald-50"], [class*="bg-emerald-100"], [class*="bg-red-50"], [class*="bg-red-100"], [class*="bg-rose-50"], [class*="bg-amber-50"], [class*="bg-amber-100"], [class*="bg-yellow-50"], [class*="bg-yellow-100"], [class*="bg-orange-50"], [class*="bg-orange-100"], [class*="bg-purple-50"], [class*="bg-pink-50"], [class*="bg-teal-50"], [class*="bg-cyan-50"], [class*="bg-sky-50"], [class*="bg-lime-50"]):not(nav *, .zt-site-footer *) :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-slate-900, .text-slate-800, .text-slate-700, .text-black) { color: #1f2937 !important; }
body.zt-app :is([class*="bg-green-50"], [class*="bg-green-100"], [class*="bg-emerald-50"], [class*="bg-emerald-100"], [class*="bg-red-50"], [class*="bg-red-100"], [class*="bg-rose-50"], [class*="bg-amber-50"], [class*="bg-amber-100"], [class*="bg-yellow-50"], [class*="bg-yellow-100"], [class*="bg-orange-50"], [class*="bg-orange-100"], [class*="bg-purple-50"], [class*="bg-pink-50"], [class*="bg-teal-50"], [class*="bg-cyan-50"], [class*="bg-sky-50"], [class*="bg-lime-50"]):not(nav *, .zt-site-footer *) :is(.text-gray-600, .text-gray-500, .text-gray-400, .text-slate-600, .text-slate-500) { color: #4b5563 !important; }

/* ---- Forms ------------------------------------------------------------------------------- */
body.zt-app :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"]), select, textarea):not(nav *, .zt-site-footer *) {
    background-color: var(--z-surface) !important;
    color: var(--z-text) !important;
}
/* Borders follow the template too — except a page's own validation state (red/green, invalid, error). */
body.zt-app :is(input:not([type="checkbox"], [type="radio"], [type="submit"], [type="button"], [type="reset"], [type="range"], [type="color"], [type="file"], [type="hidden"], [type="image"]), select, textarea):not(nav *, .zt-site-footer *):not(.is-bad, .is-good, .is-invalid, .is-valid, .error, .has-error, .invalid, .valid, [aria-invalid="true"], [class*="border-red-"], [class*="border-green-"], [class*="border-emerald-"], [class*="border-rose-"], .zt-field-error *, .has-error *) {
    border-color: var(--z-border) !important;
}
body.zt-app :is(input, textarea)::placeholder { color: var(--z-muted) !important; opacity: .85; }
body.zt-app :is(input, select, textarea):not(nav *, .zt-site-footer *):not(.is-bad, .is-invalid, .error, .has-error, .invalid, [aria-invalid="true"], [class*="border-red-"], [class*="border-rose-"]):focus { border-color: var(--z-accent) !important; outline-color: var(--z-accent); }
body.zt-app :is(input[type="checkbox"], input[type="radio"]):not(nav *, .zt-site-footer *) { accent-color: var(--z-accent); }
body.zt-app :is(input, select, textarea):disabled:not(nav *, .zt-site-footer *) { background-color: var(--z-surface-2) !important; color: var(--z-muted) !important; }
/* Low weight on purpose: a family's own link / label colours (app/{key}.css) always win. */
:where(body.zt-app) label:where(:not(nav *, .zt-site-footer *)) { color: inherit; }
:where(body.zt-app) a:not([class]):where(:not(nav *, .zt-site-footer *)) { color: var(--z-accent-text); }

/* ---- [hidden] always hides (same rule as content pages) ---------------------------------- */
body.zt-app [hidden] { display: none !important; }