/*
  Dark theme for sendsight.ai.

  The site is styled with Tailwind utilities that name brand colours
  directly (bg-[#FFFDF5], border-black, text-gray-700, ...). Rather than
  touching every element with a dark: variant, this sheet remaps those
  utilities when <html data-theme="dark">. A tiny inline script in each
  HTML shell sets the attribute before first paint (stored choice, else
  the OS preference); lib/theme.ts owns it after that.

  Rules:
  - Page goes warm near-black, surfaces a step lighter, borders and hard
    shadows flip to cream. Pastel tints become deep tints with cream text.
  - Ink-filled elements (buttons, dock pill, dark callouts) invert to cream
    with ink text. The footer is the one surface that stays dark.
  - Anything inside .keep-light is left as designed: product demos render
    the app, which is light, so they read as screenshots on a dark page.
*/

html[data-theme="dark"] {
  --bg: #121110;
  --surface: #1c1a17;
  --surface-2: #242119;
  --surface-3: #2e2a24;
  /* Softer than pure cream on purpose: this is read at night. Text sits
     around 12:1 against the page, borders and hard shadows are a warm
     mid-stone rather than white lines, and inverted buttons fill with a
     muted cream so CTAs do not glow. */
  --ink: #d9d2c4;
  --ink-strong: #d3cbbb;
  --line: #3b3630;
  --purple: #3a2b5c;
  --purple-bright: #c3a8ee;
  --mint: #1f3a28;
  --mint-bright: #8fdca6;
  --peach: #4a2a24;
  --butter: #4a381c;
  --linen: #26221c;
  color-scheme: dark;
}

/* ---------- page ---------- */

html[data-theme="dark"],
html[data-theme="dark"] body {
  background-color: var(--bg);
  color: var(--ink);
}
/* Selected text: bright purple with ink on it, instead of the browser's default on dark. */
html[data-theme="dark"] ::selection { background-color: var(--purple-bright); color: #1a1a1a; }

/* Short alias: everything below is scoped to dark mode and skips light islands. */
html[data-theme="dark"] :is(
  .bg-\[\#FFFDF5\], .bg-\[\#FFFDF5\]\/80, .bg-\[\#FFFDF5\]\/95
):not(.keep-light, .keep-light *) { background-color: var(--bg); }
html[data-theme="dark"] .bg-\[\#FFFDF5\]\/80:not(.keep-light, .keep-light *) { background-color: rgb(18 17 16 / 0.84); }
html[data-theme="dark"] .bg-\[\#FFFDF5\]\/95:not(.keep-light, .keep-light *) { background-color: rgb(18 17 16 / 0.95); }

html[data-theme="dark"] :is(.bg-white, .bg-gray-50, .hover\:bg-white:hover, .hover\:bg-gray-50:hover):not(.keep-light, .keep-light *) { background-color: var(--surface); }
/* The lit ghost card in the lifecycle loop forces white; keep it a surface at night. */
html[data-theme="dark"] .\!bg-white:not(.keep-light, .keep-light *) { background-color: var(--surface-2) !important; }
html[data-theme="dark"] .bg-white\/90:not(.keep-light, .keep-light *) { background-color: rgb(28 26 23 / 0.9); }
html[data-theme="dark"] :is(.bg-gray-100, .hover\:bg-gray-100:hover):not(.keep-light, .keep-light *) { background-color: var(--surface-2); }
html[data-theme="dark"] .bg-gray-200:not(.keep-light, .keep-light *) { background-color: var(--surface-3); }
html[data-theme="dark"] .bg-gray-300:not(.keep-light, .keep-light *) { background-color: #3f3a32; }

/* ---------- text ---------- */

html[data-theme="dark"] :is(
  .text-black, .text-\[\#1a1a1a\], .text-gray-800, .text-gray-900,
  .hover\:text-black:hover, .hover\:text-\[\#1a1a1a\]:hover
):not(.keep-light, .keep-light *) { color: var(--ink); }
html[data-theme="dark"] :is(.text-gray-700, .hover\:text-gray-700:hover, .text-\[\#3a3a3a\]):not(.keep-light, .keep-light *) { color: rgb(217 210 196 / 0.8); }
html[data-theme="dark"] :is(.text-black\/80, .text-black\/85):not(.keep-light, .keep-light *) { color: rgb(217 210 196 / 0.82); }
html[data-theme="dark"] :is(.text-black\/75, .text-black\/65):not(.keep-light, .keep-light *) { color: rgb(217 210 196 / 0.7); }
html[data-theme="dark"] .text-black\/30:not(.keep-light, .keep-light *) { color: rgb(217 210 196 / 0.36); }
html[data-theme="dark"] :is(.text-gray-600, .hover\:text-gray-600:hover, .text-black\/70, .text-\[\#1a1a1a\]\/70, .text-\[\#1a1a1a\]\/75):not(.keep-light, .keep-light *) { color: rgb(217 210 196 / 0.72); }
html[data-theme="dark"] :is(.text-gray-500, .text-black\/60, .text-black\/55):not(.keep-light, .keep-light *) { color: rgb(217 210 196 / 0.6); }
html[data-theme="dark"] :is(.text-black\/50, .text-black\/45):not(.keep-light, .keep-light *) { color: rgb(217 210 196 / 0.52); }
html[data-theme="dark"] :is(.text-gray-400, .text-black\/40, .text-black\/35, .placeholder-gray-400::placeholder):not(.keep-light, .keep-light *) { color: rgb(217 210 196 / 0.42); }
html[data-theme="dark"] .text-\[\#7c3aed\]:not(.keep-light, .keep-light *) { color: var(--purple-bright); }
html[data-theme="dark"] .text-\[\#1F7A4A\]:not(.keep-light, .keep-light *) { color: var(--mint-bright); }
html[data-theme="dark"] .text-\[\#B4413A\]:not(.keep-light, .keep-light *) { color: #f08a82; }
html[data-theme="dark"] .text-red-900:not(.keep-light, .keep-light *) { color: #fca5a5; }
html[data-theme="dark"] .text-yellow-800:not(.keep-light, .keep-light *), html[data-theme="dark"] .text-amber-800:not(.keep-light, .keep-light *) { color: #fcd34d; }
html[data-theme="dark"] .text-purple-900:not(.keep-light, .keep-light *) { color: var(--purple-bright); }
html[data-theme="dark"] .text-blue-900:not(.keep-light, .keep-light *) { color: #93c5fd; }
html[data-theme="dark"] .text-pink-900:not(.keep-light, .keep-light *) { color: #f9a8d4; }

/* Underlines drawn in ink or purple. */
html[data-theme="dark"] :is(.decoration-\[\#1a1a1a\], .decoration-black, .hover\:decoration-\[\#1a1a1a\]:hover, .hover\:decoration-black:hover):not(.keep-light, .keep-light *) { text-decoration-color: var(--ink); }
html[data-theme="dark"] .decoration-\[\#E0CCF6\]:not(.keep-light, .keep-light *) { text-decoration-color: var(--purple-bright); }

/* ---------- borders, rules, rings ---------- */

html[data-theme="dark"] :is(.border-black, .border-\[\#1a1a1a\], .hover\:border-black:hover):not(.keep-light, .keep-light *) { border-color: var(--line); }
html[data-theme="dark"] .border-black\/5:not(.keep-light, .keep-light *), html[data-theme="dark"] .border-gray-100:not(.keep-light, .keep-light *) { border-color: rgb(196 188 172 / 0.1); }
html[data-theme="dark"] :is(.border-black\/10, .border-gray-200):not(.keep-light, .keep-light *) { border-color: rgb(196 188 172 / 0.16); }
html[data-theme="dark"] :is(.border-black\/15, .border-black\/20):not(.keep-light, .keep-light *) { border-color: rgb(196 188 172 / 0.24); }
html[data-theme="dark"] :is(.border-black\/30, .border-\[\#1a1a1a\]\/30):not(.keep-light, .keep-light *) { border-color: rgb(196 188 172 / 0.36); }
html[data-theme="dark"] :is(.border-black\/40, .hover\:border-black\/40:hover):not(.keep-light, .keep-light *) { border-color: rgb(196 188 172 / 0.46); }
html[data-theme="dark"] .hover\:border-black\/60:hover:not(.keep-light, .keep-light *) { border-color: rgb(196 188 172 / 0.64); }
html[data-theme="dark"] .ring-black\/10:not(.keep-light, .keep-light *) { --tw-ring-color: rgb(196 188 172 / 0.16); }
html[data-theme="dark"] :is(.bg-black\/5, .hover\:bg-black\/5:hover):not(.keep-light, .keep-light *) { background-color: rgb(217 210 196 / 0.07); }
html[data-theme="dark"] .bg-black\/10:not(.keep-light, .keep-light *) { background-color: rgb(217 210 196 / 0.12); }
html[data-theme="dark"] .bg-black\/15:not(.keep-light, .keep-light *) { background-color: rgb(217 210 196 / 0.18); }

/* Thin divider in the nav. */
html[data-theme="dark"] .bg-black\/20:not(.keep-light, .keep-light *) { background-color: rgb(217 210 196 / 0.25); }

/* ---------- brand tints: deep versions, cream text ---------- */

html[data-theme="dark"] :is(.bg-\[\#E0CCF6\], .hover\:bg-\[\#E0CCF6\]:hover, .bg-\[\#F5F3FF\], .hover\:bg-\[\#F5F3FF\]:hover, .bg-purple-50, .hover\:bg-purple-50:hover, .from-\[\#E0CCF6\]):not(.keep-light, .keep-light *) { background-color: var(--purple); --tw-gradient-from: var(--purple) var(--tw-gradient-from-position); }
html[data-theme="dark"] :is(.bg-\[\#E0CCF6\]\/60, .hover\:bg-\[\#E0CCF6\]\/60:hover, .bg-\[\#E0CCF6\]\/50, .hover\:bg-\[\#E0CCF6\]\/50:hover):not(.keep-light, .keep-light *) { background-color: rgb(58 43 92 / 0.75); }
html[data-theme="dark"] :is(.bg-\[\#E0CCF6\]\/40, .bg-\[\#E0CCF6\]\/30):not(.keep-light, .keep-light *) { background-color: rgb(58 43 92 / 0.55); }
html[data-theme="dark"] :is(.bg-\[\#D4F6CC\], .hover\:bg-\[\#D4F6CC\]:hover, .to-\[\#D4F6CC\]):not(.keep-light, .keep-light *) { background-color: var(--mint); --tw-gradient-to: var(--mint) var(--tw-gradient-to-position); }
html[data-theme="dark"] :is(.bg-\[\#D4F6CC\]\/40, .bg-\[\#D4F6CC\]\/30, .bg-\[\#D4F6CC\]\/25):not(.keep-light, .keep-light *) { background-color: rgb(31 58 40 / 0.6); }
html[data-theme="dark"] .bg-\[\#F6D4CC\]:not(.keep-light, .keep-light *) { background-color: var(--peach); }
html[data-theme="dark"] :is(.bg-\[\#F6D4CC\]\/50, .bg-\[\#F6D4CC\]\/40):not(.keep-light, .keep-light *) { background-color: rgb(74 42 36 / 0.6); }
html[data-theme="dark"] .bg-\[\#FFE2B8\]:not(.keep-light, .keep-light *) { background-color: var(--butter); }
html[data-theme="dark"] .bg-\[\#FAF0E6\]:not(.keep-light, .keep-light *) { background-color: var(--linen); }
html[data-theme="dark"] .bg-\[\#FEF08A\]:not(.keep-light, .keep-light *) { background-color: #5a4a10; }
html[data-theme="dark"] :is(.bg-\[\#FFD1D1\], .bg-red-100, .bg-red-50, .hover\:bg-red-50:hover):not(.keep-light, .keep-light *) { background-color: #4a1f1f; }
html[data-theme="dark"] :is(.bg-amber-50, .bg-orange-50, .hover\:bg-orange-50:hover):not(.keep-light, .keep-light *) { background-color: #4a381c; }
html[data-theme="dark"] :is(.bg-blue-50, .hover\:bg-blue-50:hover):not(.keep-light, .keep-light *) { background-color: #1e2a44; }
html[data-theme="dark"] :is(.bg-pink-50, .hover\:bg-pink-50:hover):not(.keep-light, .keep-light *) { background-color: #44202f; }
html[data-theme="dark"] .border-\[\#E0CCF6\]:not(.keep-light, .keep-light *) { border-color: var(--purple-bright); }
html[data-theme="dark"] :is(.border-purple-100, .border-amber-200, .hover\:border-purple-100:hover, .hover\:border-red-100:hover, .hover\:border-pink-100:hover, .hover\:border-orange-100:hover, .hover\:border-blue-100:hover):not(.keep-light, .keep-light *) { border-color: rgb(196 188 172 / 0.3); }

/* ---------- ink-filled elements invert to cream ---------- */

html[data-theme="dark"] :is(.bg-black, .bg-\[\#1a1a1a\], .bg-\[\#333\], .hover\:bg-black:hover, .hover\:bg-\[\#1a1a1a\]:hover, .hover\:bg-\[\#333\]:hover):not(.keep-light, .keep-light *, footer, footer *) {
  background-color: var(--ink-strong);
  color: #1a1a1a;
}
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.text-white, .text-\[\#FFFDF5\], .text-\[\#FFFDF5\]\/85, .text-\[\#FFFDF5\]\/80, .text-\[\#FFFDF5\]\/70, .text-\[\#FFFDF5\]\/65, .text-\[\#FFFDF5\]\/60, .text-\[\#FFFDF5\]\/55):not(.keep-light, .keep-light *, footer *) { color: #1a1a1a; }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.text-\[\#FFFDF5\]\/85, .text-\[\#FFFDF5\]\/80, .text-\[\#FFFDF5\]\/70):not(.keep-light, .keep-light *, footer *) { color: rgb(26 26 26 / 0.78); }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.text-\[\#FFFDF5\]\/65, .text-\[\#FFFDF5\]\/60, .text-\[\#FFFDF5\]\/55):not(.keep-light, .keep-light *, footer *) { color: rgb(26 26 26 / 0.62); }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.text-\[\#E0CCF6\], .hover\:text-\[\#E0CCF6\]:hover):not(.keep-light, .keep-light *, footer *) { color: #5b3fa0; }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) .text-\[\#D4F6CC\]:not(.keep-light, .keep-light *, footer *) { color: #1f7a4a; }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.border-\[\#FFFDF5\], .border-white):not(.keep-light, .keep-light *, footer *) { border-color: #1a1a1a; }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.border-\[\#FFFDF5\]\/70, .border-\[\#FFFDF5\]\/50, .border-\[\#FFFDF5\]\/40):not(.keep-light, .keep-light *, footer *) { border-color: rgb(26 26 26 / 0.5); }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.border-\[\#FFFDF5\]\/20, .border-\[\#FFFDF5\]\/15):not(.keep-light, .keep-light *, footer *) { border-color: rgb(26 26 26 / 0.2); }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.bg-\[\#FFFDF5\]\/10, .hover\:bg-\[\#FFFDF5\]\/10:hover):not(.keep-light, .keep-light *, footer *) { background-color: rgb(26 26 26 / 0.08); }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) .hover\:bg-\[\#FFFDF5\]:hover:not(.keep-light, .keep-light *, footer *) { background-color: #1a1a1a; color: var(--ink-strong); }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) .shadow-white:not(.keep-light, .keep-light *, footer *) { --tw-shadow-color: #1a1a1a; --tw-shadow: var(--tw-shadow-colored); }
/* Pastel chips sitting on an inverted block keep their light tint and ink text. */
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.bg-\[\#E0CCF6\], .bg-\[\#D4F6CC\], .bg-\[\#F6D4CC\], .bg-\[\#FFE2B8\]):not(.keep-light, .keep-light *, footer *) { color: #1a1a1a; }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) .bg-\[\#E0CCF6\]:not(.keep-light, .keep-light *, footer *) { background-color: #e0ccf6; }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) .bg-\[\#D4F6CC\]:not(.keep-light, .keep-light *, footer *) { background-color: #d4f6cc; }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) .bg-\[\#F6D4CC\]:not(.keep-light, .keep-light *, footer *) { background-color: #f6d4cc; }
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) .bg-\[\#FFE2B8\]:not(.keep-light, .keep-light *, footer *) { background-color: #ffe2b8; }
/* Ink text that was explicitly set on an inverted block stays ink. */
html[data-theme="dark"] :where(.bg-black, .bg-\[\#1a1a1a\]) :is(.text-black, .text-\[\#1a1a1a\]):not(.keep-light, .keep-light *, footer *) { color: #1a1a1a; }
/* Inverted block on hover (e.g. cream outline button turning ink on hover). */
html[data-theme="dark"] :is(.hover\:text-white:hover, .hover\:text-\[\#FFFDF5\]:hover):not(.keep-light, .keep-light *, footer *) { color: #1a1a1a; }

/* Footer and the homepage's ink closer: the surfaces that stay dark. */
html[data-theme="dark"] footer.bg-\[\#1a1a1a\] { background-color: #0b0a09; border-color: rgb(196 188 172 / 0.2); }
html[data-theme="dark"] .ink-closer { background-color: #0b0a09 !important; color: var(--ink) !important; }

/* ---------- desktop nav pill (components/Navbar.tsx): hard shadow once scrolled ---------- */

@media (min-width: 768px) {
  .nav-pill { box-shadow: 4px 4px 0 0 #000; }
  html[data-theme="dark"] .nav-pill { box-shadow: 4px 4px 0 0 var(--line); }
  html[data-theme="dark"] .md\:bg-\[\#FFFDF5\]:not(.keep-light, .keep-light *) { background-color: var(--bg); }
  html[data-theme="dark"] .md\:border-black:not(.keep-light, .keep-light *) { border-color: var(--line); }
  /* At the top of the page the bar has no chrome; the phone-bar utilities it also carries (bg-[#FFFDF5], border-black) are remapped above and would win. */
  html[data-theme="dark"] .md\:bg-transparent { background-color: transparent !important; }
  html[data-theme="dark"] .md\:border-transparent { border-color: transparent !important; }
}

/* ---------- hard shadows flip to cream ---------- */

html[data-theme="dark"] .brutalist-shadow:not(.keep-light *) { box-shadow: 4px 4px 0 0 var(--line); }
html[data-theme="dark"] .brutalist-shadow-sm:not(.keep-light *) { box-shadow: 2px 2px 0 0 var(--line); }
html[data-theme="dark"] .brutalist-shadow-hover:hover:not(.keep-light *) { box-shadow: 6px 6px 0 0 var(--line); }
html[data-theme="dark"] .brutalist-shadow-active:active:not(.keep-light *) { box-shadow: 2px 2px 0 0 var(--line); }
html[data-theme="dark"] [class*="shadow-[8px_8px_0_0_#000]"]:not(.keep-light, .keep-light *) { box-shadow: 8px 8px 0 0 var(--line); }
html[data-theme="dark"] [class*="shadow-[6px_6px_0"]:not(.keep-light, .keep-light *) { box-shadow: 6px 6px 0 0 var(--line); }
html[data-theme="dark"] [class*="shadow-[4px_4px_0"]:not(.keep-light, .keep-light *) { box-shadow: 4px 4px 0 0 var(--line); }
html[data-theme="dark"] [class*="shadow-[3px_3px_0"]:not(.keep-light, .keep-light *) { box-shadow: 3px 3px 0 0 var(--line); }
html[data-theme="dark"] [class*="shadow-[2px_2px_0"]:not(.keep-light, .keep-light *) { box-shadow: 2px 2px 0 0 var(--line); }
html[data-theme="dark"] [class*="hover:shadow-[6px_6px_0"]:hover:not(.keep-light, .keep-light *) { box-shadow: 6px 6px 0 0 var(--line); }
html[data-theme="dark"] [class*="hover:shadow-[8px_8px_0"]:hover:not(.keep-light, .keep-light *) { box-shadow: 8px 8px 0 0 var(--line); }
html[data-theme="dark"] [class*="hover:shadow-[4px_4px_0"]:hover:not(.keep-light, .keep-light *) { box-shadow: 4px 4px 0 0 var(--line); }
/* Soft shadows read as glow-less on dark; keep them but darker. */
html[data-theme="dark"] :is(.shadow-md, .shadow-lg, .shadow-xl, .shadow-2xl, .hover\:shadow-md:hover):not(.keep-light, .keep-light *) { --tw-shadow-color: rgb(0 0 0 / 0.5); --tw-shadow: var(--tw-shadow-colored); }

/* ---------- inline SVG that names ink or cream ---------- */

html[data-theme="dark"] :not(.keep-light, .keep-light *) > svg [stroke="#1a1a1a"],
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [stroke="#1a1a1a"],
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [stroke="black"] { stroke: var(--ink); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [fill="#1a1a1a"] { fill: var(--ink); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [fill="#FFFDF5"] { fill: var(--surface); }

/* Dock: the active pill is a sibling span, so the label needs its own rule. */
html[data-theme="dark"] .dock-on { color: #1a1a1a; }

/* Pastel fills inside diagrams go deep so ink labels (now cream) stay readable. */
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [fill="#E0CCF6"] { fill: var(--purple); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [fill="#D4F6CC"] { fill: var(--mint); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [fill="#F6D4CC"] { fill: var(--peach); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [fill="#FFE2B8"] { fill: var(--butter); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [stroke="#E0CCF6"] { stroke: var(--purple-bright); }

/* ---------- light islands: product UI stays as designed ---------- */

html[data-theme="dark"] .keep-light { color: #1a1a1a; }
/* Ink-filled keep-light chips (ESP picker, How-it-works stage label) keep their cream text. */
html[data-theme="dark"] .keep-light:is(.bg-\[\#1a1a1a\], .bg-black) { color: #FFFDF5; }
html[data-theme="dark"] .keep-light.bg-white { background-color: #fff; }
html[data-theme="dark"] .keep-light.border-black { border-color: var(--line); }
html[data-theme="dark"] .keep-light.brutalist-shadow { box-shadow: 4px 4px 0 0 var(--line); }

/* ---------- images ---------- */

/* Logo marquee: dark wordmarks on a dark page. Invert while greyscale. */
html[data-theme="dark"] .logo-marquee img { filter: grayscale(1) invert(1); }
html[data-theme="dark"] .logo-marquee img:hover { filter: grayscale(0) invert(0); }
html[data-theme="dark"] img[src*="Mercury-logo"],
html[data-theme="dark"] img[src*="close-crm-logo"],
html[data-theme="dark"] img[src*="JrnyPpl-logo"] { filter: invert(1) grayscale(1); }
html[data-theme="dark"] .logo-marquee img[src*="Mercury-logo"],
html[data-theme="dark"] .logo-marquee img[src*="close-crm-logo"],
html[data-theme="dark"] .logo-marquee img[src*="JrnyPpl-logo"] { filter: grayscale(1) invert(1); }

/* ---------- additions after the first visual pass ---------- */

html[data-theme="dark"] .bg-\[\#FFF3C4\]:not(.keep-light, .keep-light *) { background-color: #4a3f14; }
html[data-theme="dark"] .bg-\[\#FFF5F5\]:not(.keep-light, .keep-light *) { background-color: #3a1d1d; }
html[data-theme="dark"] :is(.bg-\[\#F3EEE4\], .bg-\[\#F3F4F6\]):not(.keep-light, .keep-light *) { background-color: var(--surface-2); }
html[data-theme="dark"] .bg-\[\#FFF\]:not(.keep-light, .keep-light *) { background-color: var(--surface); }
/* Demo module card (components/demo/EmbedModule.tsx). Light: purple to peach to
   cream. Dark: the same three stops, pulled down to deep plum, dusky rose and
   the page itself, so the card reads as a tinted panel rather than a light
   island. The app inside stays light on its own keep-light frame. */
html[data-theme="dark"] .demo-module-card {
  background-image: linear-gradient(180deg, #2b2244 0%, #3a2a2b 55%, var(--bg) 100%);
}
html[data-theme="dark"] .demo-module-dots {
  background-image: radial-gradient(rgb(255 253 245 / 0.12) 1px, transparent 1px);
}
html[data-theme="dark"] .from-\[\#FFFDF5\]:not(.keep-light, .keep-light *) { --tw-gradient-from: var(--bg) var(--tw-gradient-from-position); }
html[data-theme="dark"] :is(.from-\[\#E0CCF6\]\/20, .from-\[\#E0CCF6\]\/30):not(.keep-light, .keep-light *) { --tw-gradient-from: rgb(58 43 92 / 0.5) var(--tw-gradient-from-position); }
html[data-theme="dark"] :is(.to-\[\#D4F6CC\]\/20, .to-\[\#D4F6CC\]\/30):not(.keep-light, .keep-light *) { --tw-gradient-to: rgb(31 58 40 / 0.5) var(--tw-gradient-to-position); }
/* The purple offset shadow on the How-it-works callout stays purple. */
html[data-theme="dark"] [class*="shadow-[4px_4px_0_0_#E0CCF6]"]:not(.keep-light, .keep-light *) { box-shadow: 4px 4px 0 0 var(--purple-bright); }

/* Plan illustrations are black line art on white: invert, then screen the black away. */
html[data-theme="dark"] img[src*="/plans/"] { filter: invert(1); mix-blend-mode: screen; }

/* Customer wordmarks are dark on transparent wherever they appear. */
html[data-theme="dark"] img:is([src*="Iterable-logo"], [src*="Ten-billion-emails"], [src*="Flowium-Logo"], [src*="Grafted-logo"], [src*="Zwift-logo"], [src*="hydrow"], [src*="Braze-logo"], [src*="Customer-io-logo"], [src*="superhuman-logo"]) { filter: grayscale(1) invert(1); }
html[data-theme="dark"] .logo-marquee img:hover { filter: grayscale(0) invert(0); }

/* Ask-your-AI logo row: single-colour ink marks, so flip them to cream. */
html[data-theme="dark"] img[src*="/ai-"] { filter: invert(1) hue-rotate(180deg); }

/* Audience pill (components/Audience.tsx): the active tab's cream label sits beside the
   ink thumb, not inside it, so the ink-button text rule above does not reach it. */
html[data-theme="dark"] .audience-tab[aria-selected="true"] { color: #1a1a1a; }


/* ---------- demos follow the theme ---------- */

/* Dot grid behind the How-it-works stage and the feature canvases. */
.stage-dots { background-image: radial-gradient(#c9c2b4 1px, transparent 1px); }
html[data-theme="dark"] .stage-dots { background-image: radial-gradient(rgb(217 210 196 / 0.28) 1px, transparent 1px); }
/* Diagram fills that name white, cream-grey or the receded tint. */
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) :is([fill="#fff"], [fill="#FFF"], [fill="white"], [fill="#ffffff"]) { fill: var(--surface); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) [fill="#EDEAE2"] { fill: var(--surface-3); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) :is([stroke="#fff"], [stroke="#FFF"], [stroke="white"], [stroke="#FFFDF5"]) { stroke: var(--surface); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) :is([fill="#1a1a1a"], [fill="black"]) { fill: var(--ink); }
html[data-theme="dark"] svg:not(.keep-light, .keep-light *) :is([stroke="#c9c2b4"], [stroke="#d6d1c4"], [stroke="#cfc9bb"]) { stroke: rgb(217 210 196 / 0.3); }
/* Acknowledged rows in the anomaly feed. */
html[data-theme="dark"] .bg-\[\#F2FBEF\]:not(.keep-light, .keep-light *) { background-color: rgb(31 58 40 / 0.4); }
/* A code pane is dark by nature; it must not invert like an ink button. */
html[data-theme="dark"] .code-pane { background-color: #0b0a09 !important; color: var(--ink) !important; }