/* ===========================================================
   ReviewShield AI — Light theme override
   Layered AFTER the compiled bundle CSS. Remaps the dark
   navy palette to a clean white/slate system while keeping
   the Google brand accents (blue / green / yellow / red) and
   the gradient text + custom cursor intact.
   =========================================================== */

/* ---- Base canvas ---- */
html, body { background: #ffffff !important; color: #0f172a; }
#root { background: #ffffff; }

/* ===========================================================
   shadcn-style CSS variables (--card, --muted, --border, etc.)
   The reference override only ever touched literal bg-[#hex]
   utility classes. Any component built with the variable-driven
   classes (bg-card, bg-muted, bg-popover, bg-sidebar, text-
   foreground, border-border/input...) was completely untouched
   by that override and stayed on the original dark values below
   -- this is why the FAQ accordion and several feature cards
   were still dark even after the "light theme" was applied.
   Brand tokens (primary/secondary/accent/destructive) are left
   alone on purpose -- those are intentional brand colors, not
   structural dark-mode leftovers.
   =========================================================== */
:root, .dark {
  --background: 0 0% 100%;
  --foreground: 222 47% 11%;
  --card: 210 20% 98%;
  --card-foreground: 222 47% 11%;
  --card-border: 220 13% 91%;
  --popover: 210 20% 98%;
  --popover-foreground: 222 47% 11%;
  --popover-border: 220 13% 91%;
  --muted: 210 20% 96%;
  --muted-foreground: 215 16% 47%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --sidebar: 210 20% 98%;
  --sidebar-foreground: 222 47% 11%;
  --sidebar-border: 220 13% 91%;
  --sidebar-accent: 210 20% 95%;
  --sidebar-accent-foreground: 222 47% 11%;
}

/* ---- Page / section dark backgrounds -> light ---- */
.bg-\[\#060d1b\],
.bg-\[\#040914\],
.bg-\[\#07102a\],
.bg-\[\#080f1e\],
.bg-\[\#080f20\],
.bg-\[\#0f1926\],
.bg-\[\#0d1117\],
.bg-\[\#0d1f14\] { background-color: #ffffff !important; }

/* ---- Cards / panels -> soft slate ---- */
.bg-\[\#0c1528\],
.bg-\[\#161b22\],
.bg-\[\#1c2333\],
.bg-\[\#202124\],
.bg-\[\#07102a\]\/30,
.bg-\[\#07102a\]\/40 { background-color: #f1f5f9 !important; }

/* ---- Opacity-suffixed variants of the dark page/panel colors ----
   (the reference override only ever covered the bare, 100%-opacity
   class for each color -- the sticky nav bar specifically uses the
   /90 and /98 variants of #060d1b, which is why it stayed dark) */
.bg-\[\#060d1b\]\/90,
.bg-\[\#060d1b\]\/98,
.bg-\[\#0d1117\]\/90,
.bg-\[\#040914\]\/80 { background-color: #ffffff !important; }

/* ===========================================================
   TEXT  (white -> slate hierarchy)
   =========================================================== */
.text-white { color: #0f172a !important; }

.text-white\/80, .text-white\/75, .text-white\/70, .text-white\/65 { color: #1e293b !important; }
.text-white\/60, .text-white\/50 { color: #334155 !important; }
.text-white\/40, .text-white\/35 { color: #475569 !important; }
.text-white\/30, .text-white\/25 { color: #64748b !important; }
.text-white\/20, .text-white\/15 { color: #94a3b8 !important; }

.hover\:text-white:hover { color: #0f172a !important; }
.hover\:text-white\/60:hover { color: #334155 !important; }

/* ===========================================================
   BORDERS  (white -> slate hairlines)
   =========================================================== */
.border-white\/5, .border-white\/6, .border-white\/8 { border-color: rgba(15,23,42,.07) !important; }
.border-white\/10, .border-white\/12, .border-white\/15 { border-color: rgba(15,23,42,.10) !important; }
.border-white\/20, .border-white\/30 { border-color: rgba(15,23,42,.16) !important; }
.ring-white\/10 { --tw-ring-color: rgba(15,23,42,.10) !important; }

/* ===========================================================
   GLASS FILLS  (white/NN -> faint slate fills)
   bg-white/90 stays a solid white chip and is left untouched.
   =========================================================== */
.bg-white\/5, .bg-white\/8 { background-color: rgba(15,23,42,.035) !important; }
.bg-white\/10, .bg-white\/12 { background-color: rgba(15,23,42,.05) !important; }
.bg-white\/15, .bg-white\/20 { background-color: rgba(15,23,42,.07) !important; }
.hover\:bg-white\/5:hover, .hover\:bg-white\/10:hover, .hover\:bg-white\/12:hover { background-color: rgba(15,23,42,.06) !important; }

/* ===========================================================
   HERO / SECTION GRADIENTS  (navy stops -> light)
   =========================================================== */
.from-\[\#060d1b\] { --tw-gradient-from: #ffffff !important; }
.via-\[\#060d1b\], .via-\[\#07102a\], .via-\[\#080f20\] { --tw-gradient-via: #f8fafc !important; }
.to-\[\#060d1b\] { --tw-gradient-to: #ffffff !important; }

/* ===========================================================
   KEEP WHITE TEXT on solid brand-colored buttons / badges
   (these elements were dark-on-color before; text must stay white)
   Uses [class~=...] (exact whitespace-delimited token match)
   instead of [class*=...] (substring match) -- the substring
   version also matched "hover:bg-[#34A853]" etc. (since that
   string CONTAINS "bg-[#34A853]"), which incorrectly forced
   white text on elements whose resting background is NOT that
   brand color at all (e.g. the dark-gray "SEO setup" button,
   whose text stayed unreadably white against its new light bg).
   =========================================================== */
[class~="bg-[#34A853]"], [class~="bg-[#34A853]"] .text-white,
[class~="bg-[#4285F4]"], [class~="bg-[#4285F4]"] .text-white,
[class~="bg-[#EA4335]"], [class~="bg-[#EA4335]"] .text-white,
[class~="bg-[#FBBC04]"], [class~="bg-[#FBBC04]"] .text-white,
[class~="bg-[#E1306C]"], [class~="bg-[#E1306C]"] .text-white,
[class~="bg-[#1877F2]"], [class~="bg-[#1877F2]"] .text-white,
[class~="bg-[#2d9249]"], [class~="bg-[#2d9249]"] .text-white,
[class~="from-[#4285F4]"], [class~="from-[#4285F4]"] .text-white,
[class~="from-[#34A853]"], [class~="from-[#34A853]"] .text-white,
[class~="from-[#2AABEE]"], [class~="from-[#2AABEE]"] .text-white {
  color: #ffffff !important;
}

/* white/NN text on brand buttons -> keep light too */
[class~="bg-[#34A853]"] [class*="text-white/"],
[class~="bg-[#4285F4]"] [class*="text-white/"],
[class~="from-[#4285F4]"] [class*="text-white/"],
[class~="from-[#34A853]"] [class*="text-white/"],
[class~="from-[#2AABEE]"] [class*="text-white/"] {
  color: rgba(255,255,255,.85) !important;
}

/* ===========================================================
   Remove the leftover "SEO setup" dev/debug button -- it isn't
   meant to be customer-facing and was confirmed (via direct DOM
   inspection of the live page) to be a real element in the page,
   not a browser extension overlay.
   =========================================================== */
[data-testid="seo-setup-button"] { display: none !important; }

/* The original cursor-dot/cursor-ring only ever existed inside
   the homepage's React tree, so it vanished on every other route
   while the native cursor stayed globally hidden -- replaced by
   a route-agnostic version injected in index.html (#rs-cursor-dot
   / #rs-cursor-ring). Hide the React-only one everywhere so the
   two don't double up on the homepage. */
.cursor-dot, .cursor-ring { display: none !important; }

/* Soften the big shadows so they read on a light canvas */
.shadow-2xl, .shadow-xl { --tw-shadow-color: rgba(15,23,42,.12) !important; }

/* ---- Hand-written custom classes (unlayered, so source order matters --
   this file is linked after the compiled stylesheet, so these win) ---- */
.glass-card { background: rgba(255,255,255,.85) !important; border-color: rgba(15,23,42,.08) !important; }
::-webkit-scrollbar-track { background: #f1f5f9; }