/* Light theme for the public website.
 *
 * Dark is the default look and its colors are hardcoded Tailwind utilities
 * (tw:bg-[#0f1322], tw:text-white, ...) throughout templates/web/ and the
 * Stimulus-generated DOM. Instead of rewriting hundreds of templates, this
 * file remaps those utility classes to a light palette — the same technique
 * as templates/microsite/_theme_chrome_remap.html.twig (escaped arbitrary-
 * value selectors + !important, scoped to a theme hook).
 *
 * The hook is html[data-theme="light"], applied before first paint by the
 * inline boot script in templates/web/base.html.twig (cookie / user pref).
 * Without the attribute this entire file is inert, so the dark default and
 * the anonymous edge cache are untouched.
 *
 * Kept OUT of app.css on purpose: the tailwind binary only compiles app.css
 * and must not touch these escaped selectors.
 */

/* ---------------------------------------------------------------- */
/* Palette                                                          */
/* ---------------------------------------------------------------- */
html[data-theme="light"] {
    --site-bg: #f3f4f9;        /* page background        (dark: #0f1322) */
    --site-bg-deep: #e8eaf2;   /* footer / deep chrome   (dark: #0d1128, #2d3142) */
    --site-surface: #ffffff;   /* header, cards, modals  (dark: #1a1f3a) */
    --site-surface-2: #eef0f7; /* inputs, inset panels   (dark: #252b4a) */
    --site-surface-3: #e3e6f0; /* hovers, raised insets  (dark: #1f2540, #2f3660, #353b5a) */
    --site-text: #171b30;      /* primary text           (dark: white) */
    --site-text-2: #3d4356;    /* secondary text         (dark: gray-200/300) */
    --site-text-muted: #626980;/* muted text             (dark: gray-400) */
    --site-text-faint: #7c8299;/* placeholders, dimmest  (dark: gray-500/600) */
    /* "ink" = --site-text as raw rgb for alpha borders/fills replacing white/N */
    --site-ink: 23, 27, 48;
}

/* ---------------------------------------------------------------- */
/* Surfaces                                                         */
/* ---------------------------------------------------------------- */
html[data-theme="light"] .tw\:bg-\[\#0f1322\] { background-color: var(--site-bg) !important; }
html[data-theme="light"] .tw\:via-\[\#0f1322\] { --tw-gradient-via: var(--site-bg) !important; }

html[data-theme="light"] .tw\:bg-\[\#0d1128\],
html[data-theme="light"] .tw\:bg-\[\#2d3142\] { background-color: var(--site-bg-deep) !important; }

html[data-theme="light"] .tw\:bg-\[\#1a1f3a\] { background-color: var(--site-surface) !important; }
html[data-theme="light"] .tw\:bg-\[\#1a1f3a\]\/95 { background-color: color-mix(in srgb, var(--site-surface) 95%, transparent) !important; }
html[data-theme="light"] .tw\:bg-\[\#1a1f3a\]\/50 { background-color: color-mix(in srgb, var(--site-surface) 60%, transparent) !important; }
html[data-theme="light"] .tw\:from-\[\#1a1f3a\] { --tw-gradient-from: var(--site-surface) !important; }
html[data-theme="light"] .tw\:to-\[\#1a1f3a\] { --tw-gradient-to: var(--site-surface) !important; }

html[data-theme="light"] .tw\:bg-\[\#252b4a\],
html[data-theme="light"] .tw\:hover\:bg-\[\#252b4a\]:hover { background-color: var(--site-surface-2) !important; }
html[data-theme="light"] .tw\:hover\:bg-\[\#252b4a\]\/80:hover { background-color: color-mix(in srgb, var(--site-surface-2) 80%, transparent) !important; }
html[data-theme="light"] .tw\:from-\[\#252b4a\] { --tw-gradient-from: var(--site-surface-2) !important; }

html[data-theme="light"] .tw\:bg-\[\#1f2540\],
html[data-theme="light"] .tw\:hover\:bg-\[\#2f3660\]:hover,
html[data-theme="light"] .tw\:hover\:bg-\[\#353b5a\]:hover { background-color: var(--site-surface-3) !important; }

/* Share-button slate (#2a4a5a / hover #345c6e) → neutral secondary surface.
   Its tw:text-white label follows the normal dark-ink text remap (it is NOT
   in the keep-white lists below) so the button reads as a proper secondary
   action instead of white-on-pale. */
html[data-theme="light"] .tw\:bg-\[\#2a4a5a\] { background-color: color-mix(in srgb, rgb(var(--site-ink)) 12%, var(--site-surface)) !important; }
html[data-theme="light"] .tw\:hover\:bg-\[\#345c6e\]:hover { background-color: color-mix(in srgb, rgb(var(--site-ink)) 22%, var(--site-surface)) !important; }

html[data-theme="light"] .tw\:border-\[\#1a1f3a\],
html[data-theme="light"] .tw\:border-\[\#252b4a\] { border-color: rgba(var(--site-ink), 0.14) !important; }
html[data-theme="light"] .tw\:ring-\[\#252b4a\] { --tw-ring-color: rgba(var(--site-ink), 0.14) !important; }

/* ---------------------------------------------------------------- */
/* Text                                                             */
/* ---------------------------------------------------------------- */
html[data-theme="light"] .tw\:text-white,
html[data-theme="light"] .tw\:hover\:text-white:hover,
html[data-theme="light"] .tw\:group:hover .tw\:group-hover\:text-white { color: var(--site-text) !important; }
html[data-theme="light"] .tw\:text-white\/80 { color: rgba(var(--site-ink), 0.8) !important; }
html[data-theme="light"] .tw\:text-white\/70 { color: rgba(var(--site-ink), 0.7) !important; }
html[data-theme="light"] .tw\:text-white\/60 { color: rgba(var(--site-ink), 0.6) !important; }

html[data-theme="light"] .tw\:text-gray-200,
html[data-theme="light"] .tw\:text-gray-300,
html[data-theme="light"] .tw\:hover\:text-gray-200:hover,
html[data-theme="light"] .tw\:hover\:text-gray-300:hover { color: var(--site-text-2) !important; }

html[data-theme="light"] .tw\:text-gray-400,
html[data-theme="light"] .tw\:group:hover .tw\:group-hover\:text-gray-400,
html[data-theme="light"] .tw\:text-\[\#A8A9BD\] { color: var(--site-text-muted) !important; }

html[data-theme="light"] .tw\:text-gray-500,
html[data-theme="light"] .tw\:text-gray-600 { color: var(--site-text-faint) !important; }
html[data-theme="light"] .tw\:placeholder-gray-500::placeholder { color: var(--site-text-faint) !important; }

/* ---------------------------------------------------------------- */
/* White-alpha chrome → ink-alpha                                   */
/* (image-overlay chrome — bg-white/20+, carousel dots — stays white) */
/* ---------------------------------------------------------------- */
html[data-theme="light"] .tw\:border-white\/5 { border-color: rgba(var(--site-ink), 0.08) !important; }
html[data-theme="light"] .tw\:border-white\/10 { border-color: rgba(var(--site-ink), 0.12) !important; }
html[data-theme="light"] .tw\:border-white\/15 { border-color: rgba(var(--site-ink), 0.16) !important; }
html[data-theme="light"] .tw\:border-white\/20 { border-color: rgba(var(--site-ink), 0.2) !important; }
html[data-theme="light"] .tw\:border-white\/30 { border-color: rgba(var(--site-ink), 0.3) !important; }
html[data-theme="light"] .tw\:hover\:border-white\/20:hover,
html[data-theme="light"] .tw\:hover\:border-white\/30:hover { border-color: rgba(var(--site-ink), 0.3) !important; }

html[data-theme="light"] .tw\:bg-white\/5 { background-color: rgba(var(--site-ink), 0.05) !important; }
html[data-theme="light"] .tw\:bg-white\/10 { background-color: rgba(var(--site-ink), 0.08) !important; }
html[data-theme="light"] .tw\:hover\:bg-white\/5:hover,
html[data-theme="light"] .tw\:hover\:bg-white\/10:hover,
html[data-theme="light"] .tw\:hover\:bg-white\/15:hover { background-color: rgba(var(--site-ink), 0.07) !important; }
html[data-theme="light"] .tw\:hover\:bg-white\/20:hover { background-color: rgba(var(--site-ink), 0.1) !important; }

html[data-theme="light"] .tw\:ring-white\/5,
html[data-theme="light"] .tw\:ring-white\/10 { --tw-ring-color: rgba(var(--site-ink), 0.12) !important; }
html[data-theme="light"] .tw\:divide-white\/5 > * + *,
html[data-theme="light"] .tw\:divide-white\/10 > * + * { border-color: rgba(var(--site-ink), 0.1) !important; }

/* ---------------------------------------------------------------- */
/* Accent / solid-fill preservation — AFTER the text remaps so text  */
/* sitting on accent (or other solid) fills stays white.             */
/* Accent #ff006b itself is brand-fixed and needs no bg remap.       */
/* ---------------------------------------------------------------- */
html[data-theme="light"] :is(
    .tw\:bg-\[\#ff006b\],
    .tw\:bg-\[\#e6005f\],
    .tw\:bg-\[\#7c3aed\],
    .tw\:bg-\[\#6d28d9\],
    .tw\:bg-\[\#1db954\],
    .tw\:bg-green-500,
    .tw\:bg-red-500,
    .tw\:bg-blue-500
).tw\:text-white { color: #ffffff !important; }

/* Black-alpha overlays (modal close circles, unfollow buttons, media chips)
   stay black in light theme, so their white text/icons must stay white too. */
html[data-theme="light"] :is(
    .tw\:bg-black\/30,
    .tw\:bg-black\/40,
    .tw\:bg-black\/50,
    .tw\:bg-black\/60,
    .tw\:bg-black\/70,
    .tw\:bg-black\/75,
    .tw\:bg-black\/80,
    .tw\:bg-black\/90
).tw\:text-white,
html[data-theme="light"] :is(
    .tw\:bg-black\/30,
    .tw\:bg-black\/40,
    .tw\:bg-black\/50,
    .tw\:bg-black\/60,
    .tw\:bg-black\/70,
    .tw\:bg-black\/75,
    .tw\:bg-black\/80,
    .tw\:bg-black\/90
) .tw\:text-white { color: #ffffff !important; }
html[data-theme="light"] :is(
    .tw\:bg-\[\#ff006b\],
    .tw\:bg-\[\#e6005f\],
    .tw\:bg-\[\#7c3aed\],
    .tw\:bg-\[\#6d28d9\],
    .tw\:bg-\[\#1db954\],
    .tw\:from-\[\#ff006b\],
    .tw\:bg-green-500,
    .tw\:bg-red-500,
    .tw\:bg-blue-500
) .tw\:text-white { color: #ffffff !important; }

/* ---------------------------------------------------------------- */
/* Status text colors — dark-bg pastels → readable-on-light tones    */
/* (their translucent tint backgrounds work on light as-is)          */
/* ---------------------------------------------------------------- */
html[data-theme="light"] .tw\:text-red-300,
html[data-theme="light"] .tw\:text-red-400,
html[data-theme="light"] .tw\:hover\:text-red-400:hover { color: #dc2626 !important; }
html[data-theme="light"] .tw\:text-green-300,
html[data-theme="light"] .tw\:text-green-400 { color: #15803d !important; }
html[data-theme="light"] .tw\:text-\[\#1db954\] { color: #14833b !important; }
html[data-theme="light"] .tw\:text-yellow-200,
html[data-theme="light"] .tw\:text-yellow-300,
html[data-theme="light"] .tw\:text-yellow-400 { color: #a16207 !important; }
html[data-theme="light"] .tw\:text-amber-400,
html[data-theme="light"] .tw\:text-\[\#FBBF24\] { color: #b45309 !important; }
html[data-theme="light"] .tw\:text-blue-300,
html[data-theme="light"] .tw\:text-blue-400 { color: #1d4ed8 !important; }
html[data-theme="light"] .tw\:text-blue-400\/70 { color: rgba(29, 78, 216, 0.75) !important; }
html[data-theme="light"] .tw\:text-\[\#22D3EE\] { color: #0e7490 !important; }
html[data-theme="light"] .tw\:text-purple-200,
html[data-theme="light"] .tw\:text-purple-300,
html[data-theme="light"] .tw\:text-purple-400 { color: #6d28d9 !important; }
html[data-theme="light"] .tw\:text-purple-400\/70 { color: rgba(109, 40, 217, 0.75) !important; }
html[data-theme="light"] .tw\:text-pink-300,
html[data-theme="light"] .tw\:text-pink-400 { color: #be185d !important; }
html[data-theme="light"] .tw\:text-pink-400\/70 { color: rgba(190, 24, 93, 0.75) !important; }
html[data-theme="light"] .tw\:text-orange-200,
html[data-theme="light"] .tw\:text-orange-300,
html[data-theme="light"] .tw\:text-orange-400 { color: #c2410c !important; }
html[data-theme="light"] .tw\:text-emerald-400 { color: #047857 !important; }

/* ---------------------------------------------------------------- */
/* Misc                                                              */
/* ---------------------------------------------------------------- */
/* Toggle switch tracks (unchecked) */
html[data-theme="light"] .tw\:bg-gray-600 { background-color: #cbd5e1 !important; }
html[data-theme="light"] .tw\:bg-gray-600\/50 { background-color: rgba(var(--site-ink), 0.12) !important; }
html[data-theme="light"] .tw\:border-gray-600 { border-color: rgba(var(--site-ink), 0.2) !important; }
/* Neutral chips */
html[data-theme="light"] .tw\:bg-gray-500\/15 { background-color: rgba(var(--site-ink), 0.08) !important; }
html[data-theme="light"] .tw\:bg-gray-500\/20 { background-color: rgba(var(--site-ink), 0.1) !important; }
/* Static/legal content pages (static_content_page.html.twig) style their
   h2/strong with raw `color: white` in an inline <style>, which the utility
   remaps above can't reach — on the light card they'd render invisible. */
html[data-theme="light"] .static-content-card h2,
html[data-theme="light"] .static-content-card strong { color: var(--site-text) !important; }

/* contact_us / business-application style select options dark via raw CSS */
html[data-theme="light"] .form-select option {
    background-color: var(--site-surface) !important;
    color: var(--site-text) !important;
}

/* Toasts (toast_controller.js) float over arbitrary content with
   backdrop-blur; their translucent tints wash out on light pages. Give them
   solid light surfaces and stronger borders so the text stays readable. */
html[data-theme="light"] #js-toast-container .tw\:bg-green-500\/15 { background-color: #e2f4e8 !important; }
html[data-theme="light"] #js-toast-container .tw\:bg-red-500\/15 { background-color: #fce9e9 !important; }
html[data-theme="light"] #js-toast-container .tw\:bg-yellow-500\/15 { background-color: #faf2da !important; }
html[data-theme="light"] #js-toast-container .tw\:bg-blue-500\/15 { background-color: #e4eefc !important; }
html[data-theme="light"] #js-toast-container .tw\:border-green-500\/30 { border-color: rgba(21, 128, 61, 0.4) !important; }
html[data-theme="light"] #js-toast-container .tw\:border-red-500\/30 { border-color: rgba(220, 38, 38, 0.4) !important; }
html[data-theme="light"] #js-toast-container .tw\:border-yellow-500\/30 { border-color: rgba(161, 98, 7, 0.4) !important; }
html[data-theme="light"] #js-toast-container .tw\:border-blue-500\/30 { border-color: rgba(29, 78, 216, 0.4) !important; }

/* Thin scrollbar (white-alpha in app.css) */
html[data-theme="light"] .thin-scrollbar {
    scrollbar-color: rgba(var(--site-ink), 0.25) transparent;
}
html[data-theme="light"] .thin-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(var(--site-ink), 0.25);
}
html[data-theme="light"] .thin-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--site-ink), 0.4);
}