/*
 * theme.css — light palette for the static onfire.so pages (blog, FAQ, legal)
 * and the Tailwind-built React pages (/business, /fireproof, /investors).
 *
 * Those pages are written dark-first with a small set of Tailwind colour
 * utilities. In light mode (html[data-theme="light"], set by /theme.js) the
 * rules below remap exactly those utilities. The html[...] prefix out-ranks
 * Tailwind's single-class rules wherever they are injected.
 * The theme toggle button styles live here too.
 */

/* ---------- theme toggle button (both themes) ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; flex: none;
  border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; color: inherit;
  cursor: pointer; transition: background-color 200ms ease, border-color 200ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.08); }
.theme-toggle:active { transform: scale(0.92); }
.theme-toggle:focus-visible { outline: 2px solid #ffce54; outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ti-moon { display: none; }
html[data-theme="light"] .theme-toggle { border-color: rgba(26, 20, 16, 0.16); }
html[data-theme="light"] .theme-toggle:hover { background: rgba(26, 20, 16, 0.06); }
html[data-theme="light"] .theme-toggle:focus-visible { outline-color: #c2410c; }
html[data-theme="light"] .theme-toggle .ti-sun { display: none; }
html[data-theme="light"] .theme-toggle .ti-moon { display: block; }

/* ---------- light palette ---------- */
html[data-theme="light"] {
  --lt-bg: #faf7f4;
  --lt-surface: #ffffff;
  --lt-raise: #f2ede8;
  --lt-raise-2: #e8e1da;
  --lt-ink: #1a1410;
  --lt-ink-2: #2e2723;
  --lt-ink-3: #453d37;
  --lt-ink-4: #5e5650;
  --lt-ink-5: #6f6760;
  --lt-line: rgba(26, 20, 16, 0.12);
  --lt-line-soft: rgba(26, 20, 16, 0.07);
  --lt-accent: #c2410c;
  background: var(--lt-bg);
}

/* surfaces */
html[data-theme="light"] .bg-dark-900,
html[data-theme="light"] .hover\:bg-dark-900:hover,
html[data-theme="light"] .bg-\[\#0a0b14\] { background-color: var(--lt-bg); }
html[data-theme="light"] .bg-dark-900\/95 { background-color: rgba(250, 247, 244, 0.95); }
html[data-theme="light"] .bg-dark-900\/50 { background-color: rgba(250, 247, 244, 0.5); }
html[data-theme="light"] .bg-dark-800,
html[data-theme="light"] .bg-\[\#111827\],
html[data-theme="light"] .bg-gray-900 { background-color: var(--lt-surface); }
html[data-theme="light"] .bg-dark-800\/40,
html[data-theme="light"] .bg-gray-900\/50 { background-color: rgba(255, 255, 255, 0.7); }
html[data-theme="light"] .bg-dark-700,
html[data-theme="light"] .hover\:bg-dark-700:hover,
html[data-theme="light"] .bg-gray-800,
html[data-theme="light"] .hover\:bg-gray-800:hover { background-color: var(--lt-raise); }
html[data-theme="light"] .bg-dark-600,
html[data-theme="light"] .bg-gray-700,
html[data-theme="light"] .hover\:bg-gray-700:hover { background-color: var(--lt-raise-2); }
html[data-theme="light"] .bg-white\/5 { background-color: rgba(26, 20, 16, 0.04); }
html[data-theme="light"] .bg-white\/10 { background-color: rgba(26, 20, 16, 0.06); }

/* gradients that fade into the dark page */
html[data-theme="light"] .via-dark-800,
html[data-theme="light"] .via-dark-700,
html[data-theme="light"] .via-gray-900 { --tw-gradient-stops: var(--tw-gradient-from), var(--lt-surface) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"] .to-dark-900,
html[data-theme="light"] .to-\[\#0a0b14\] { --tw-gradient-to: var(--lt-bg) var(--tw-gradient-to-position); }
html[data-theme="light"] .to-dark-800,
html[data-theme="light"] .to-dark-700,
html[data-theme="light"] .to-gray-900 { --tw-gradient-to: var(--lt-surface) var(--tw-gradient-to-position); }
html[data-theme="light"] .from-dark-800,
html[data-theme="light"] .from-gray-900 { --tw-gradient-from: var(--lt-surface) var(--tw-gradient-from-position); --tw-gradient-to: rgba(255, 255, 255, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

/* text: white text stays white on the orange buttons */
html[data-theme="light"] body.text-white,
html[data-theme="light"] .text-white:not(.bg-primary):not(.bg-primary *):not(.bg-orange-500):not(.bg-orange-500 *),
html[data-theme="light"] .hover\:text-white:hover:not(.bg-primary):not(.bg-orange-500) { color: var(--lt-ink); }
html[data-theme="light"] .text-gray-200 { color: var(--lt-ink-2); }
html[data-theme="light"] .text-gray-300,
html[data-theme="light"] .hover\:text-gray-300:hover { color: var(--lt-ink-3); }
html[data-theme="light"] .text-gray-400 { color: var(--lt-ink-4); }
html[data-theme="light"] .text-gray-400\/60 { color: rgba(94, 86, 80, 0.75); }
html[data-theme="light"] .text-gray-500,
html[data-theme="light"] .text-gray-600 { color: var(--lt-ink-5); }

/* accents: the -400 shades are tuned for dark; use darker ones on light */
html[data-theme="light"] .text-primary { color: var(--lt-accent); }
html[data-theme="light"] .text-orange-400,
html[data-theme="light"] .text-orange-500 { color: #c2410c; }
html[data-theme="light"] .text-red-400 { color: #b91c1c; }
html[data-theme="light"] .text-green-400 { color: #15803d; }
html[data-theme="light"] .text-yellow-400,
html[data-theme="light"] .text-amber-400 { color: #a16207; }
html[data-theme="light"] .text-cyan-400 { color: #0e7490; }
html[data-theme="light"] .text-blue-400 { color: #1d4ed8; }
html[data-theme="light"] .text-purple-400 { color: #7e22ce; }
html[data-theme="light"] .text-emerald-400 { color: #047857; }
html[data-theme="light"] .text-pink-400 { color: #be185d; }

/* borders */
html[data-theme="light"] .border-white\/10,
html[data-theme="light"] .border-gray-800,
html[data-theme="light"] .border-gray-700,
html[data-theme="light"] .hover\:border-gray-700:hover { border-color: var(--lt-line); }
html[data-theme="light"] .border-white\/5 { border-color: var(--lt-line-soft); }

/* prose bits on the blog / legal pages */
html[data-theme="light"] .prose-invert { --tw-prose-body: var(--lt-ink-3); --tw-prose-headings: var(--lt-ink); --tw-prose-links: var(--lt-accent); --tw-prose-bold: var(--lt-ink); }

/* OnFire Call vs Zoom comparison table */
html[data-theme="light"] .cmp thead th { color: var(--lt-ink-5); }
html[data-theme="light"] .cmp tbody tr { border-top-color: var(--lt-line); }
html[data-theme="light"] .cmp tbody th,
html[data-theme="light"] .cmp td { color: var(--lt-ink-3); }
html[data-theme="light"] .cmp .win { color: var(--lt-ink); }

/* soften the cards' hover glow on light */
html[data-theme="light"] .card-hover:hover { box-shadow: 0 12px 40px rgba(26, 20, 16, 0.08); }

/* ---------- React Tailwind pages (/business, /fireproof, /investors) ---------- */
html[data-theme="light"] .bg-\[\#0a0b14\]\/95 { background-color: rgba(250, 247, 244, 0.95); }
html[data-theme="light"] .bg-\[\#0f1029\] { background-color: var(--lt-raise); }
html[data-theme="light"] .bg-gray-900\/30,
html[data-theme="light"] .bg-gray-900\/40,
html[data-theme="light"] .bg-gray-800\/50,
html[data-theme="light"] .bg-gray-800\/60 { background-color: rgba(255, 255, 255, 0.75); }
html[data-theme="light"] .bg-gray-900\/80 { background-color: rgba(255, 255, 255, 0.9); }
html[data-theme="light"] .bg-gray-600,
html[data-theme="light"] .hover\:bg-gray-600:hover { background-color: var(--lt-raise-2); }
html[data-theme="light"] .hover\:bg-white\/10:hover { background-color: rgba(26, 20, 16, 0.06); }

html[data-theme="light"] .from-\[\#0a0b14\] { --tw-gradient-from: var(--lt-bg) var(--tw-gradient-from-position); --tw-gradient-to: rgba(250, 247, 244, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"] .from-\[\#0f1029\]\/80,
html[data-theme="light"] .from-gray-900\/50 { --tw-gradient-from: rgba(242, 237, 232, 0.8) var(--tw-gradient-from-position); --tw-gradient-to: rgba(242, 237, 232, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html[data-theme="light"] .via-\[\#0f1029\],
html[data-theme="light"] .via-gray-800 { --tw-gradient-stops: var(--tw-gradient-from), var(--lt-raise) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"] .via-gray-900\/30,
html[data-theme="light"] .via-gray-900\/40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(255, 255, 255, 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to); }
html[data-theme="light"] .to-\[\#0f1029\] { --tw-gradient-to: var(--lt-raise) var(--tw-gradient-to-position); }
html[data-theme="light"] .to-gray-900\/30 { --tw-gradient-to: rgba(255, 255, 255, 0.4) var(--tw-gradient-to-position); }

html[data-theme="light"] .text-white\/80:not(.bg-orange-500 *) { color: rgba(26, 20, 16, 0.8); }
html[data-theme="light"] .text-white\/60:not(.bg-orange-500 *) { color: rgba(26, 20, 16, 0.62); }
html[data-theme="light"] .text-orange-500\/80 { color: rgba(194, 65, 12, 0.85); }
html[data-theme="light"] .hover\:text-orange-500:hover { color: #c2410c; }

html[data-theme="light"] .border-gray-600,
html[data-theme="light"] .border-gray-800\/50,
html[data-theme="light"] .border-gray-700\/50 { border-color: var(--lt-line); }