/* SalesRep light mode — activated by html.sr-light (preference in localStorage 'sr-theme').
   The site's markup uses a fixed dark palette; this sheet remaps those tokens to light equivalents. */

html.sr-light {
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;
    color-scheme: light;
}

/* ---- Page + section backgrounds ---- */
html.sr-light [class*="bg-[#0f172a]"],
html.sr-light [class*="bg-[#0b1120]"],
html.sr-light [class*="bg-[#0c1222]"],
html.sr-light [class*="bg-[#0c1322]"],
html.sr-light [class*="bg-[#0d1117]"],
html.sr-light [class*="bg-[#020617]"],
html.sr-light [class*="bg-[#0a0a23]"],
html.sr-light [class*="bg-slate-950"],
html.sr-light [class*="bg-slate-900"],
html.sr-light [class*="bg-gray-950"] { background-color: #f8fafc !important; }

/* Cards and panels */
html.sr-light [class*="bg-[#1e293b]"],
html.sr-light [class*="bg-[#171e2c]"] { background-color: #ffffff !important; }
html.sr-light [class*="bg-[#141c2e]"],
html.sr-light [class*="bg-[#161b22]"],
html.sr-light [class*="bg-[#1a2744]"],
html.sr-light [class*="bg-[#161616]"],
html.sr-light [class*="bg-[#1a2535]"] { background-color: #eef2f7 !important; }
html.sr-light [class*="bg-[#1a2f1f]"] { background-color: #ecfdf5 !important; }

/* Text overlaid on dark image cards (aspect-video thumbnails) must stay light in light mode */
html.sr-light [class*="aspect-video"] .text-white { color: #ffffff !important; }
html.sr-light [class*="aspect-video"] [class*="text-blue-4"],
html.sr-light [class*="aspect-video"] [class*="text-blue-3"] { color: #bfdbfe !important; }

/* Form fields built with bg-gray-900 (e.g. Contact Us form) — light field on light card */
html.sr-light [class*="bg-gray-900"] { background-color: #eef2f7 !important; }
html.sr-light [class*="bg-gray-900"]::placeholder,
html.sr-light [class*="bg-gray-900"] option { color: #64748b; }

/* site.css dark gradient utilities (hero / page washes) */
html.sr-light .blue-gradient-page,
html.sr-light .blue-gradient-hero,
html.sr-light .blue-gradient-section { background: linear-gradient(180deg, #e8eefb 0%, #f8fafc 55%, #f1f5f9 100%) !important; }

/* Inline-styled dark gradients on sections, divs and the navbar */
html.sr-light section[style*="linear-gradient"] { background: #f1f5f9 !important; }
html.sr-light div[style*="linear-gradient"][style*="rgba(15,23,42"],
html.sr-light div[style*="linear-gradient"][style*="rgba(15, 23, 42"],
html.sr-light div[style*="linear-gradient"][style*="#0f172a"] { background: #eef2f7 !important; }
html.sr-light nav[style*="linear-gradient"] { background: rgba(255, 255, 255, 0.92) !important; border-bottom-color: rgba(15, 23, 42, 0.08) !important; }
html.sr-light footer[style*="linear-gradient"] { background: #e2e8f0 !important; border-top-color: rgba(15, 23, 42, 0.08) !important; }

/* Dark-base Tailwind gradient utilities (hero washes) — flatten to light */
html.sr-light [class*="from-blue-950"],
html.sr-light [class*="to-[#0f172a]"],
html.sr-light [class*="via-blue-900/10"] { background-image: none !important; background-color: transparent !important; }

/* CTA / success-story section bands use a dark `from-[#0f172a]` gradient — give light mode a soft light gradient.
   Use ~= to match the exact class token only, so image overlays (from-[#0f172a]/80) are NOT affected. */
html.sr-light [class~="from-[#0f172a]"] { background-image: linear-gradient(to bottom, #e6edfa 0%, #f4f6fb 55%, #eaf0fb 100%) !important; background-color: transparent !important; }

/* ---- Text ---- */
html.sr-light .text-white { color: #0f172a !important; }
html.sr-light .text-gray-200, html.sr-light .text-gray-300 { color: #334155 !important; }
html.sr-light .text-gray-400 { color: #475569 !important; }
html.sr-light .text-gray-500, html.sr-light .text-gray-600 { color: #64748b !important; }
html.sr-light .text-blue-300 { color: #1d4ed8 !important; }
html.sr-light .text-blue-400 { color: #2563eb !important; }
html.sr-light .text-green-400 { color: #059669 !important; }
html.sr-light .text-green-300 { color: #047857 !important; }

/* Keep light text on solid colored controls (buttons, badges) */
html.sr-light [class*="bg-blue-6"].text-white,
html.sr-light [class*="bg-blue-5"].text-white,
html.sr-light [class*="bg-green-6"].text-white,
html.sr-light [class*="bg-blue-6"] .text-white,
html.sr-light [class*="hover:bg-blue-5"].text-white { color: #ffffff !important; }

/* ---- Borders & subtle fills ---- */
html.sr-light [class*="border-white/"],
html.sr-light [class*="border-white\\["] { border-color: rgba(15, 23, 42, 0.12) !important; }
html.sr-light [class*="border-blue-900/"] { border-color: rgba(37, 99, 235, 0.15) !important; }
html.sr-light [class*="border-gray-600"] { border-color: #cbd5e1 !important; }
html.sr-light [class*="bg-white/5"] { background-color: rgba(15, 23, 42, 0.04) !important; }
html.sr-light [class*="bg-white/10"] { background-color: rgba(15, 23, 42, 0.07) !important; }
html.sr-light [class*="hover:bg-white/10"]:hover { background-color: rgba(15, 23, 42, 0.08) !important; }
html.sr-light [class*="hover:bg-white/20"]:hover { background-color: rgba(15, 23, 42, 0.12) !important; }

/* Decorative blur orbs: soften so they don't grey the light background */
html.sr-light [class*="blur-["][class*="bg-blue-6"],
html.sr-light [class*="blur-["][class*="bg-blue-5"],
html.sr-light [class*="blur-["][class*="bg-purple-6"],
html.sr-light [class*="blur-["][class*="bg-indigo-5"],
html.sr-light [class*="blur-["][class*="bg-green-6"] { opacity: 0.35; }

/* Dropdowns / popovers that used near-black glass */
html.sr-light [class*="bg-gray-950/95"] { background-color: rgba(255, 255, 255, 0.97) !important; }

/* Shadows tuned down (dark shadows look heavy on light) */
html.sr-light [class*="shadow-blue-950"],
html.sr-light [class*="shadow-blue-900"] { --tw-shadow-color: rgba(30, 64, 175, 0.15) !important; }

/* Gradient-blue icon chips (bg-gradient-to-br from-blue-*) keep a white glyph in light mode… */
html.sr-light [class*="bg-gradient-to-br"][class*="from-blue-"].text-white { color: #ffffff !important; }
/* Card icon chips flip to solid blue on hover — keep their glyph white in light mode
   (the generic .text-blue-400 override would otherwise leave a blue icon on a blue chip) */
html.sr-light .group:hover [class*="group-hover:bg-blue-600"] { color: #ffffff !important; background-color: #2563eb !important; }
html.sr-light .group:hover [class*="group-hover:bg-blue-600"] svg { color: #ffffff !important; }

/* Theme toggle icon shows the CURRENT mode: auto (half circle), light (sun), dark (moon) */
.sr-theme-sun, .sr-theme-moon, .sr-theme-auto { display: none; }
html[data-sr-theme="light"] .sr-theme-sun { display: inline-block; }
html[data-sr-theme="dark"] .sr-theme-moon { display: inline-block; }
html[data-sr-theme="auto"] .sr-theme-auto { display: inline-block; }
html:not([data-sr-theme]) .sr-theme-auto { display: inline-block; }

/* Theme-dependent asset variants (e.g. white vs dark logos) */
.sr-light-only { display: none; }
html.sr-light .sr-light-only { display: inline-block; }
html.sr-light .sr-dark-only { display: none; }

/* Pricing contact-count selects use a fixed dark bg (bg-[#1a1a1a]); recolor for light mode */
html.sr-light #home-contact-selector,
html.sr-light #contact-selector,
html.sr-light [class*="bg-[#1a1a1a]"] { background-color: #ffffff !important; color: #0f172a !important; border-color: rgba(15, 23, 42, 0.12) !important; }
html.sr-light #home-contact-selector option,
html.sr-light #contact-selector option { background-color: #ffffff; color: #0f172a; }

/* Features page orbit hub — its own dark gradient (hub.css #0a0e1a) isn't caught by the bg-[#0f172a]
   overrides. Light mode: make the WHOLE section AND the hub one flat #E4EAFB so the center logo (whose
   PNG interior is transparent) blends seamlessly into the background with no visible disc. */
html.sr-light section:has(> .hub-container) { background: #E4EAFB !important; }
html.sr-light .hub-container { background: #E4EAFB !important; border-color: rgba(15,23,42,0.08) !important; }
html.sr-light .hub-container::before { background-image: radial-gradient(rgba(15,23,42,0.05) 1px, transparent 1px) !important; }
html.sr-light .hub-container::after { background-image: none !important; }
html.sr-light .hub-container .label { color: rgba(15,23,42,0.5) !important; }
html.sr-light .hub-container .icon-card .status-dot { border-color: #E4EAFB !important; }
/* Center logo: backing matches the section; drop the glow halo so the interior doesn't read as a separate disc. */
html.sr-light .hub-container .center-logo-wrap img { background: #E4EAFB !important; }
html.sr-light .hub-container .center-glow-outer,
html.sr-light .hub-container .center-glow-inner { background: none !important; }
html.sr-light .hub-container .center-logo-wrap { filter: none !important; }

/* "50% OFF" promo badge — light orange text (orange-300) on the pale orange gradient is illegible
   in light mode. Darken the text and firm up the background/border for contrast. (Only 2 usages: the
   pricing page + home pricing section badge.) */
html.sr-light .text-orange-300 { color: #b45309 !important; }
html.sr-light [class*="from-orange-500"][class*="to-red-500"] { background-image: linear-gradient(to right, rgba(234,88,12,0.16), rgba(220,38,38,0.16)) !important; border-color: rgba(234,88,12,0.5) !important; }

/* Integrations filter pills — base styles use near-white text/overlays that vanish on the light filter bar. */
html.sr-light .filter-pill { background: rgba(15,23,42,0.04) !important; border-color: rgba(15,23,42,0.12) !important; color: #475569 !important; }
html.sr-light .filter-pill:hover { background: rgba(15,23,42,0.08) !important; color: #0f172a !important; }
html.sr-light .filter-pill.active { background: rgba(37,99,235,0.14) !important; border-color: rgba(37,99,235,0.5) !important; color: #2563eb !important; }