/* ============================================================
   Relight Marketing — Light theme override layer
   Activated by html[data-theme="light"]. The site markup is built
   with hardcoded dark colors; this remaps the small, consistent
   palette to a warm off-white light theme with peach gradients.
   Dark mode = no/incorrect data-theme → native markup shows through.
   ============================================================ */

/* ============================================================
   BRAND FONTS (theme-independent)
   Anton = display headings · Geist = everything else.
   @font-face lives in assets/fonts.css (base64-embedded so it
   works over file:// too). These rules apply the families with
   high specificity + !important to beat per-page inline defs.
   ============================================================ */

/* Body + UI text → Geist */
html body { font-family: 'Geist', system-ui, sans-serif !important; }
html .font-montserrat { font-family: 'Geist', system-ui, sans-serif !important; }

/* Big display headings → Anton (card titles use .font-montserrat → Geist) */
html h1.font-serif,
html h2.font-serif {
  font-family: 'Anton', 'Geist', sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
}

/* Logo wordmark is intentionally left as the page's original
   Instrument Serif italic — not remapped. */

/* ---- Page background: off-white with soft peach + lilac wash ---- */
html[data-theme="light"] body {
  background:
    radial-gradient(120% 80% at 88% -5%, rgba(255, 73, 37, 0.10), transparent 55%),
    radial-gradient(90% 70% at 5% 8%, rgba(255, 122, 69, 0.07), transparent 50%),
    radial-gradient(80% 60% at 60% 100%, rgba(150, 130, 210, 0.06), transparent 55%),
    #F6F2EF !important;
  background-attachment: fixed !important;
  color: #1A1A1A !important;
}

/* ---- Text ---- */
html[data-theme="light"] .text-\[\#CACACA\] { color: #1A1A1A !important; }
html[data-theme="light"] .text-\[\#555555\] { color: #756E67 !important; }
/* Dark text (used on light buttons in dark mode) → light text on dark buttons in light mode */
html[data-theme="light"] .text-\[\#090909\] { color: #F6F2EF !important; }

/* ---- Solid surfaces (cards, inputs, sections were near-black) ---- */
html[data-theme="light"] .bg-\[\#090909\] { background-color: #FFFFFF !important; }
html[data-theme="light"] .bg-\[\#0d0d0d\] { background-color: #FBF9F7 !important; }
html[data-theme="light"] .bg-\[\#121212\] { background-color: #FFFFFF !important; }
html[data-theme="light"] .bg-\[\#333333\] { background-color: #E7E1DB !important; }
html[data-theme="light"] .bg-\[\#333333\]\/50 { background-color: rgba(231,225,219,0.6) !important; }

/* Primary button: dark-mode light pill → dark pill in light mode */
html[data-theme="light"] .bg-\[\#CACACA\] { background-color: #1A1A1A !important; }

/* Hover states must beat the !important base overrides above, so the
   accent (orange) hover works in light mode exactly like dark mode. */
html[data-theme="light"] .hover\:bg-\[\#FF4925\]:hover { background-color: #FF4925 !important; }
html[data-theme="light"] .hover\:text-\[\#FF4925\]:hover { color: #FF4925 !important; }
html[data-theme="light"] .hover\:text-\[\#090909\]:hover { color: #090909 !important; }
/* Bulletproof: any primary pill (light grey in dark mode → dark in light mode)
   turns orange with dark text on hover, independent of the hover utility class. */
html[data-theme="light"] .bg-\[\#CACACA\]:hover { background-color: #FF4925 !important; color: #090909 !important; }
html[data-theme="light"] .bg-\[\#CACACA\]:hover * { color: #090909 !important; }

/* ---- Borders ---- */
html[data-theme="light"] .border-\[\#333333\] { border-color: #E5DED7 !important; }
html[data-theme="light"] .border-\[\#333333\]\/50 { border-color: rgba(229,222,215,0.7) !important; }
html[data-theme="light"] .border-\[\#333333\]\/70 { border-color: #DED6CE !important; }
html[data-theme="light"] .ring-\[\#333333\] { --tw-ring-color: #E5DED7 !important; }

/* ---- Gradient cards: from-[#333333]/xx ... to-[#090909] → faint warm white ---- */
html[data-theme="light"] .from-\[\#333333\]\/20 {
  --tw-gradient-from: rgba(26,26,26,0.035) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(26,26,26,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="light"] .from-\[\#333333\]\/40 {
  --tw-gradient-from: rgba(26,26,26,0.05) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(26,26,26,0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-theme="light"] .to-\[\#090909\] { --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position) !important; }
html[data-theme="light"] .via-\[\#333333\] { --tw-gradient-via: rgba(26,26,26,0.06) !important; }

/* ---- Glass nav: dark glass → light glass ---- */
html[data-theme="light"] .glass {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(26, 26, 26, 0.08) !important;
}

/* ---- Hero background grid lines (dark on dark) → fade on light ---- */
html[data-theme="light"] [class*="#333333_1px"] { opacity: 0.05 !important; }

/* ---- Shadows: heavy black shadows soften on light ---- */
html[data-theme="light"] .shadow-black,
html[data-theme="light"] .shadow-2xl.shadow-black\/50,
html[data-theme="light"] .shadow-black\/50,
html[data-theme="light"] .shadow-black\/20,
html[data-theme="light"] .shadow-black\/40 {
  --tw-shadow-color: rgba(120, 100, 90, 0.14) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}

/* ---- ROI Calculator: slider track + thumb on light ---- */
html[data-theme="light"] input[type=range].rl-range {
  background: #E5DED7 !important;
}
html[data-theme="light"] input[type=range].rl-range {
  background: linear-gradient(to right, #FF4925 var(--val), #E5DED7 var(--val)) !important;
}
html[data-theme="light"] input[type=range].rl-range::-webkit-slider-thumb { border-color: #F6F2EF !important; }
html[data-theme="light"] input[type=range].rl-range::-moz-range-thumb { border-color: #F6F2EF !important; }

/* ROI hero result cards keep their tinted gradients (orange/green) — readable on light.
   Net-profit green text stays green; just ensure it's a deeper green on white. */
html[data-theme="light"] .text-green-400 { color: #15803D !important; }
html[data-theme="light"] .text-green-500 { color: #15803D !important; }
html[data-theme="light"] .text-red-400 { color: #DC2626 !important; }

/* ---- Results lightbox stays a DARK overlay in both modes (focuses on the
   light screenshot). Re-force its text light so the global overrides don't
   turn it invisible. ---- */
html[data-theme="light"] #lightbox .text-\[\#CACACA\] { color: #CACACA !important; }
html[data-theme="light"] #lightbox .text-\[\#555555\] { color: #888078 !important; }
html[data-theme="light"] #lightbox .hover\:text-\[\#FF4925\]:hover { color: #FF4925 !important; }

/* ---- Theme toggle button look ---- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  border: 1px solid rgba(202, 202, 202, 0.25);
  color: inherit;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.theme-toggle:hover { color: #FF4925; border-color: rgba(255, 73, 37, 0.5); }
html[data-theme="light"] .theme-toggle { border-color: rgba(26, 26, 26, 0.12); }

/* ============================================================
   LIGHT-MODE POLISH — staged rollout via body.rl-polish
   (currently only the homepage carries this class). Adds
   background depth, elevated white cards, neutral card borders,
   and warm peach feature panels. Dark mode is unaffected.
   ============================================================ */

/* Richer, layered page background with subtle vertical depth */
html[data-theme="light"] body.rl-polish {
  background:
    radial-gradient(130% 85% at 90% -10%, rgba(255, 73, 37, 0.13), transparent 50%),
    radial-gradient(80% 60% at 0% 4%, rgba(255, 140, 95, 0.10), transparent 46%),
    radial-gradient(95% 80% at 75% 106%, rgba(150, 125, 210, 0.09), transparent 55%),
    linear-gradient(180deg, #FBF8F5 0%, #F1EBE4 100%) !important;
  background-attachment: fixed !important;
}

/* Content cards → clean flat white, lifted off the warm background */
html[data-theme="light"] body.rl-polish [class*="from-[#333333]"] {
  --tw-gradient-from: #FFFFFF var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #FFFFFF var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  box-shadow: 0 1px 2px rgba(60, 45, 35, 0.05), 0 18px 38px -16px rgba(60, 45, 35, 0.16) !important;
}

/* Card hairline borders → neutral & subtle (instead of the orange tint) */
html[data-theme="light"] body.rl-polish [style*="--border-gradient"]::before {
  background: linear-gradient(135deg, rgba(40, 30, 25, 0.10), rgba(40, 30, 25, 0.035)) !important;
}

/* Feature panels (hero, testimonial, CTA) → warm peach gradient for depth */
html[data-theme="light"] body.rl-polish .bg-\[\#090909\].rounded-\[2rem\] {
  background: linear-gradient(152deg, #FFF3EE 0%, #FFFFFF 58%) !important;
  border-color: rgba(255, 73, 37, 0.18) !important;
  box-shadow: 0 1px 2px rgba(60, 45, 35, 0.05), 0 30px 70px -28px rgba(255, 73, 37, 0.22) !important;
}

/* Stronger glass nav over the richer background */
html[data-theme="light"] body.rl-polish .glass {
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid rgba(26, 26, 26, 0.07) !important;
  box-shadow: 0 8px 30px -12px rgba(60, 45, 35, 0.18) !important;
}