/* ===== Techven — light theme =====
   The pages are authored dark (Tailwind utilities + per-page <style>). This
   sheet re-maps those same classes when <html data-theme="light"> is set by
   theme.js, so no page markup has to change. */

html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] body { background: #F7F7F9; color: #0A0A0F; }

/* ---- Text ---- */
html[data-theme="light"] .text-white,
html[data-theme="light"] .group:hover .group-hover\:text-white { color: #0A0A0F; }
html[data-theme="light"] .text-white\/10 { color: rgba(10,10,15,.10); }
html[data-theme="light"] .group:hover .group-hover\:text-white\/20 { color: rgba(10,10,15,.22); }
html[data-theme="light"] .text-slate-100 { color: #0F172A; }
html[data-theme="light"] .text-slate-200 { color: #1E293B; }
html[data-theme="light"] .text-slate-300 { color: #334155; }
html[data-theme="light"] .text-slate-400 { color: #55617A; }
html[data-theme="light"] .text-slate-500 { color: #6B7689; }
html[data-theme="light"] .text-slate-600 { color: #94A3B8; }

/* Brand orange is too pale for text on white — use a deeper shade */
html[data-theme="light"] .text-\[\#F4795B\],
html[data-theme="light"] .hover\:text-\[\#F4795B\]:hover,
html[data-theme="light"] .prose a { color: #DC4A26; }
html[data-theme="light"] .gradient-text { background-image: linear-gradient(100deg,#F25C3B 0%,#DC4A26 30%,#F4795B 50%,#DC4A26 70%,#F25C3B 100%); }
html[data-theme="light"] .text-red-400 { color: #DC2626; }
html[data-theme="light"] .text-amber-400 { color: #D97706; }
html[data-theme="light"] .text-green-400,
html[data-theme="light"] .text-green-300 { color: #15803D; }

/* Solid brand / WhatsApp surfaces keep white content */
html[data-theme="light"] .from-\[\#F4795B\].to-\[\#F25C3B\],
html[data-theme="light"] .from-\[\#F4795B\].to-\[\#F25C3B\] .text-white,
html[data-theme="light"] .bg-green-500,
html[data-theme="light"] .bg-green-500 .text-white { color: #fff; }

/* ---- Surfaces ---- */
html[data-theme="light"] .bg-ink { background-color: #fff; }
html[data-theme="light"] .bg-ink\/60 { background-color: rgba(255,255,255,.85); }
html[data-theme="light"] .bg-\[\#0A0A0F\]\/80 { background-color: rgba(255,255,255,.85); backdrop-filter: blur(12px); }
html[data-theme="light"] .to-ink { --tw-gradient-to: #F7F7F9 var(--tw-gradient-to-position); }
html[data-theme="light"] .from-ink\/90 {
  --tw-gradient-from: rgba(247,247,249,.9) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(247,247,249,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html[data-theme="light"] .from-white\/15 {
  --tw-gradient-from: rgba(10,10,15,.15) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(10,10,15,0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html[data-theme="light"] .bg-white\/\[\.02\] { background-color: rgba(10,10,15,.025); }
html[data-theme="light"] .bg-white\/\[\.03\] { background-color: #fff; box-shadow: 0 1px 2px rgba(10,10,15,.04); }
html[data-theme="light"] .bg-white\/\[\.04\] { background-color: rgba(10,10,15,.04); }
html[data-theme="light"] .bg-white\/5 { background-color: rgba(10,10,15,.05); }
html[data-theme="light"] .bg-white\/20 { background-color: rgba(10,10,15,.2); }
html[data-theme="light"] .hover\:bg-white\/5:hover,
html[data-theme="light"] .hover\:bg-white\/\[\.05\]:hover,
html[data-theme="light"] .hover\:bg-white\/\[\.06\]:hover { background-color: rgba(10,10,15,.04); }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(10,10,15,.07); }

html[data-theme="light"] .glass { background: rgba(255,255,255,.75); border-color: rgba(10,10,15,.10); }
html[data-theme="light"] .grid-bg { background-image: linear-gradient(rgba(10,10,15,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,15,.05) 1px,transparent 1px); }
html[data-theme="light"] .plan-popular { background: rgba(244,121,91,.08); }

/* ---- Borders & shadows ---- */
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-white\/\[\.07\] { border-color: rgba(10,10,15,.10); }
html[data-theme="light"] .hover\:border-white\/20:hover { border-color: rgba(10,10,15,.22); }
html[data-theme="light"] .divide-white\/10 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(10,10,15,.10); }
html[data-theme="light"] .pricing-table th,
html[data-theme="light"] .pricing-table td { border-bottom-color: rgba(10,10,15,.08); }
html[data-theme="light"] .shadow-black\/30,
html[data-theme="light"] .shadow-black\/60,
html[data-theme="light"] .hover\:shadow-black\/50:hover { --tw-shadow-color: rgba(10,10,15,.12); }

/* ---- Content & forms ---- */
html[data-theme="light"] .prose p,
html[data-theme="light"] .prose ul { color: #334155; }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color-scheme: light; }
html[data-theme="light"] select option { background: #fff; color: #0A0A0F; }

/* ---- Images ---- */
/* The wordmark is white — swap in the ink version */
html[data-theme="light"] img[src$="logo/logo.png"] { content: url(logo/logo-dark.png); }
/* Client logos are white-on-transparent marks */
html[data-theme="light"] .client-logo { filter: brightness(0); opacity: .55; }
html[data-theme="light"] .client-logo:hover { opacity: .85; }