/* ==========================================================================
   REW Wrestling - theme.css
   Admin-customizable theme layer (Admin → Appearance → Theme Customizer).
   Loaded AFTER the inline ThemeService::css() block and BEFORE app.css on
   the public website only.

   IMPORTANT: this file NEVER defines the --rew-* variables. The single
   source of truth is the inline <style> emitted by ThemeService::css()
   from the colors saved in MySQL. Defining them here again would create a
   competing :root block that (loading later) overrides the saved palette.

   Every var() carries a stock-REW fallback so components keep the original
   look even on the rare page that renders without the inline block.

   Every rule is prefixed with `html` (or `html.dark`) so it reliably wins
   over the Tailwind CDN runtime stylesheet (which injects its <style> tag
   asynchronously and uses single-class selectors).

   NOTE: Tailwind arbitrary classes are escaped with a SINGLE backslash in
   real CSS (e.g. .hover\:bg-red-700:hover, .bg-red-600\/90). This file is
   post-processed by build step `php tmp_fix_css.php` if ever needed.

   Mapping rules (what each Tailwind class used to be):
   - bg-red-600 / text-red-600 / border-red-600 / hover:bg-red-600
         -> var(--rew-primary)   (admin "Primary Color")
   - hover:bg-red-700 / hover:text-red-700
         -> var(--rew-primary-hover) (admin "Primary Hover Color")
   - text-red-500 / dark:text-red-500 / hover:text-red-500 / text-red-400
         -> var(--rew-accent)    (admin "Accent Color")
   - bg-white dark:bg-gray-900 cards -> var(--rew-card-bg) (light mode)
   - body bg-gray-50/text-gray-900  -> var(--rew-body-bg)/var(--rew-text-color)
   - headings -> var(--rew-heading-color)
   - header/nav surfaces + link colors -> --rew-header-bg / --rew-header-text
   - footer bg-gray-950 text-gray-400 -> --rew-footer-bg / --rew-footer-text
   - border-gray-100/200 + rings -> var(--rew-border-color)
   - bg-amber-500 / text-amber-600 (gold) -> var(--rew-secondary)
   - Red /90 /20 /10 tints and red shadows -> color-mix() of primary/accent.
   Dark mode intentionally keeps the stock REW dark surfaces for readability;
   brand colors follow the admin theme in both modes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base: body background + text, headings, bare-link hover
   -------------------------------------------------------------------------- */
html body {
    background-color: var(--rew-body-bg, #f9fafb);
    color: var(--rew-text-color, #111827);
}

/* Class-level beat: <body> carries text-gray-900 (0,1,0); qualifying with the
   class (0,1,1) wins so admin Body Text Color applies everywhere. */
html body.text-gray-900,
html body.text-gray-800,
html body.text-gray-700 {
    color: var(--rew-text-color, #111827);
}

html.dark body {
    /* Dark mode keeps the stock night surface + light text for contrast. */
    background-color: #0b0b0f;
    color: #f3f4f6;
}

html h1, html h2, html h3, html h4, html h5, html h6 {
    color: var(--rew-heading-color, #111827);
}

html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
    color: inherit;
}

/* Bare links keep their inherited color; hover follows the link colors. */
html main a:hover,
html footer a:hover {
    color: var(--rew-link-hover, #b91c1c);
}

/* --------------------------------------------------------------------------
   Primary surfaces: badges, pills, active tabs, icon tiles
   -------------------------------------------------------------------------- */
html .bg-red-600 { background-color: var(--rew-primary, #dc2626); }
html .bg-red-600\/90 { background-color: color-mix(in srgb, var(--rew-primary, #dc2626) 90%, transparent); }
html .bg-red-600\/20 { background-color: color-mix(in srgb, var(--rew-primary, #dc2626) 20%, transparent); }
html .bg-red-600\/10 { background-color: color-mix(in srgb, var(--rew-primary, #dc2626) 10%, transparent); }
html .dark .dark\:bg-red-600\/10 { background-color: color-mix(in srgb, var(--rew-primary, #dc2626) 10%, transparent); }

/* Soft tint surfaces (dropdown hover, flash backgrounds). */
html .bg-red-50 { background-color: color-mix(in srgb, var(--rew-primary, #dc2626) 8%, #ffffff); }
html .dark .dark\:bg-red-900\/30 { background-color: color-mix(in srgb, var(--rew-primary, #dc2626) 30%, transparent); }

/* Hover fills. */
/* Fills also switch the label to the admin Button Text Color. */
html .hover\:bg-red-600:hover {
    background-color: var(--rew-primary, #dc2626);
    color: var(--rew-btn-text, #ffffff);
}
html .hover\:bg-red-700:hover { background-color: var(--rew-primary-hover, #b91c1c); }
html .hover\:bg-red-50:hover { background-color: color-mix(in srgb, var(--rew-primary, #dc2626) 8%, #ffffff); }
html .dark .dark\:hover\:bg-red-600\/10:hover { background-color: color-mix(in srgb, var(--rew-primary, #dc2626) 10%, transparent); }

/* --------------------------------------------------------------------------
   Buttons: primary bg + admin-controlled text, darker on hover.
   Targets the recurring "bg-red-600 hover:bg-red-700 ... text-white" combo so
   the button label follows --rew-btn-text even though markup says text-white.
   -------------------------------------------------------------------------- */
html .bg-red-600.hover\:bg-red-700 {
    background-color: var(--rew-primary, #dc2626);
    color: var(--rew-btn-text, #ffffff);
}
html .bg-red-600.hover\:bg-red-700:hover {
    background-color: var(--rew-primary-hover, #b91c1c);
}

/* Gradient CTA (hero slider) follows the primary pair + button text. */
html .bg-gradient-to-r.from-red-600 {
    color: var(--rew-btn-text, #ffffff);
}

/* --------------------------------------------------------------------------
   Text utilities
   -------------------------------------------------------------------------- */
html .text-red-600 { color: var(--rew-primary, #dc2626); }
html .text-red-500 { color: var(--rew-accent, #ef4444); }
html .text-red-400 { color: color-mix(in srgb, var(--rew-accent, #ef4444) 80%, #ffffff); }

html .hover\:text-red-600:hover { color: var(--rew-primary, #dc2626); }
html .hover\:text-red-400:hover { color: color-mix(in srgb, var(--rew-accent, #ef4444) 80%, #ffffff); }

html .group:hover .group-hover\:text-red-600 { color: var(--rew-primary, #dc2626); }

/* Dark mode: brighten brand text to the accent for contrast. */
html.dark .text-red-600 { color: var(--rew-accent, #ef4444); }
html.dark .dark\:text-red-500 { color: var(--rew-accent, #ef4444); }
html.dark .dark\:text-red-400 { color: var(--rew-accent, #ef4444); }
html.dark .hover\:text-red-600:hover { color: var(--rew-accent, #ef4444); }
html.dark .dark\:hover\:text-red-500:hover { color: var(--rew-accent, #ef4444); }
html.dark .group:hover .group-hover\:text-red-600 { color: var(--rew-accent, #ef4444); }
html.dark .group:hover .dark\:group-hover\:text-red-500 { color: var(--rew-accent, #ef4444); }

/* Error-flash text (deep red in light, soft red in dark). */
html .text-red-800 { color: color-mix(in srgb, var(--rew-primary-hover, #b91c1c) 85%, #000000); }
html.dark .dark\:text-red-200 { color: color-mix(in srgb, var(--rew-accent, #ef4444) 75%, #ffffff); }

/* Championship gold (hall of fame badge, bronze rank). */
html .bg-amber-500 { background-color: var(--rew-secondary, #d4af37); }
html .text-amber-600 { color: var(--rew-secondary, #d4af37); }

/* --------------------------------------------------------------------------
   Borders, rings, gradients, shadows
   -------------------------------------------------------------------------- */
html .border-red-600 { border-color: var(--rew-primary, #dc2626); }
html .hover\:border-red-600:hover { border-color: var(--rew-primary, #dc2626); }
html .border-red-500 { border-color: var(--rew-accent, #ef4444); }
html .hover\:border-red-500:hover { border-color: var(--rew-accent, #ef4444); }
html .border-red-600\/30 { border-color: color-mix(in srgb, var(--rew-primary, #dc2626) 30%, transparent); }
html .border-red-300 { border-color: color-mix(in srgb, var(--rew-primary, #dc2626) 35%, #ffffff); }
html.dark .dark\:border-red-700 { border-color: color-mix(in srgb, var(--rew-primary-hover, #b91c1c) 50%, transparent); }
html.dark .dark\:hover\:border-red-600:hover { border-color: var(--rew-primary, #dc2626); }

html .group:hover .group-hover\:ring-red-600 { --tw-ring-color: var(--rew-primary, #dc2626); }
html .ring-red-600 { --tw-ring-color: var(--rew-primary, #dc2626); }
html .focus\:ring-red-600:focus { --tw-ring-color: var(--rew-primary, #dc2626); }
html .dark .dark\:focus\:ring-red-600:focus { --tw-ring-color: var(--rew-primary, #dc2626); }
html .focus\:ring-red-500:focus { --tw-ring-color: var(--rew-accent, #ef4444); }

/* Gradients (hero CTA, section headers, event banners, album tiles). */
html .from-red-600 { --tw-gradient-from: var(--rew-primary, #dc2626) var(--tw-gradient-from-position, ); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .to-red-700 { --tw-gradient-to: var(--rew-primary-hover, #b91c1c) var(--tw-gradient-to-position, ); }
html .to-red-800 { --tw-gradient-to: var(--rew-primary-hover, #b91c1c) var(--tw-gradient-to-position, ); }
html .hover\:from-red-500:hover { --tw-gradient-from: var(--rew-accent, #ef4444) var(--tw-gradient-from-position, ); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .hover\:to-red-600:hover { --tw-gradient-to: var(--rew-primary, #dc2626) var(--tw-gradient-to-position, ); }
html .from-red-900 { --tw-gradient-from: color-mix(in srgb, var(--rew-primary, #dc2626) 45%, #0a0a0a) var(--tw-gradient-from-position, ); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html .via-red-950\/40 { --tw-gradient-to: transparent var(--tw-gradient-to-position, ); --tw-gradient-stops: var(--tw-gradient-from), color-mix(in srgb, var(--rew-primary, #dc2626) 14%, #0a0a0a) var(--tw-gradient-via-position, ), var(--tw-gradient-to); }

/* Brand-tinted glows. */
html .shadow-red-600\/30 { --tw-shadow-color: color-mix(in srgb, var(--rew-primary, #dc2626) 30%, transparent); --tw-shadow: var(--tw-shadow-colored); }
html .shadow-red-600\/50 { --tw-shadow-color: color-mix(in srgb, var(--rew-primary, #dc2626) 50%, transparent); --tw-shadow: var(--tw-shadow-colored); }
html .shadow-red-500\/80 { --tw-shadow-color: color-mix(in srgb, var(--rew-accent, #ef4444) 80%, transparent); --tw-shadow: var(--tw-shadow-colored); }
html .shadow-red-900\/40 { --tw-shadow-color: color-mix(in srgb, var(--rew-primary, #dc2626) 40%, transparent); --tw-shadow: var(--tw-shadow-colored); }

/* --------------------------------------------------------------------------
   Structural surfaces: header / nav / footer
   -------------------------------------------------------------------------- */
html header.bg-white {
    background-color: var(--rew-header-bg, #ffffff);
}
html header nav.bg-white {
    background-color: var(--rew-header-bg, #ffffff);
}
/* Class-level beat: nav links carry text-gray-700 (0,1,0); this compound
   selector (0,2,2) wins so nav follows the admin Header Text Color. */
html header a,
html header nav a.text-gray-700,
html header nav a.text-gray-600,
html header nav a.text-gray-500 {
    color: var(--rew-header-text, #374151);
}
html header a:hover {
    color: var(--rew-primary, #dc2626);
}
html header a.text-red-600 {
    color: var(--rew-primary, #dc2626);
}
html.dark header.bg-white,
html.dark header nav.bg-white {
    background-color: #030712;
}
html.dark header a {
    color: #d1d5db;
}
html.dark header a:hover {
    color: var(--rew-accent, #ef4444);
}
html.dark header a.text-red-600 {
    color: var(--rew-accent, #ef4444);
}

html footer.bg-gray-950 {
    background-color: var(--rew-footer-bg, #030712);
    color: var(--rew-footer-text, #9ca3af);
}
html footer a {
    color: inherit;
}

/* Footer headings/whites lean on the admin Footer Text Color so they stay
   readable (brighter than body text) on any admin-chosen footer surface. */
html footer.bg-gray-950 .text-white {
    color: color-mix(in srgb, var(--rew-footer-text, #9ca3af) 30%, #ffffff);
}

/* --------------------------------------------------------------------------
   Cards / panels: the recurring "bg-white dark:bg-gray-900" pattern.
   Dark mode keeps its dark surface.
   -------------------------------------------------------------------------- */
html .bg-white.dark\:bg-gray-900 {
    background-color: var(--rew-card-bg, #ffffff);
}
html .dark .bg-white.dark\:bg-gray-900 {
    background-color: #111827;
}

/* --------------------------------------------------------------------------
   Borders, dividers and rings around cards / photos / inputs
   -------------------------------------------------------------------------- */
html .border-gray-100,
html .border-gray-200 {
    border-color: var(--rew-border-color, #f3f4f6);
}
html .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--rew-border-color, #f3f4f6);
}
html .ring-gray-100,
html .ring-gray-200 {
    --tw-ring-color: var(--rew-border-color, #f3f4f6);
}
html.dark .ring-gray-100,
html.dark .ring-gray-200 {
    --tw-ring-color: #27272a;
}
html.dark .border-gray-100,
html.dark .border-gray-200 {
    border-color: #1f2937;
}

/* --------------------------------------------------------------------------
   Shared details: selection color, focus outline, social hover tiles
   (app.css also references the same variables with its own fallbacks)
   -------------------------------------------------------------------------- */
html ::selection {
    background-color: var(--rew-primary, #dc2626);
    color: var(--rew-btn-text, #ffffff);
}

html a:focus-visible,
html button:focus-visible,
html input:focus-visible,
html select:focus-visible,
html textarea:focus-visible {
    outline-color: var(--rew-primary, #dc2626);
}

html .social-icon:hover,
html .social-icon-header:hover {
    background-color: var(--rew-primary, #dc2626);
}

/* Hero slider active dot (app.js toggles this class). */
html .rew-dot-active {
    background-color: var(--rew-primary, #dc2626);
    --tw-shadow-color: color-mix(in srgb, var(--rew-accent, #ef4444) 80%, transparent);
    --tw-shadow: var(--tw-shadow-colored);
}