/* ==========================================================================
   Theme toggle + light theme.
   The site is built dark-first with Tailwind tokens (--color-white is the "ink"
   colour, --color-night-* are the surfaces). The light theme re-points those
   tokens, so every `text-white/70`, `bg-white/[0.03]`, `border-white/10`, … flips
   automatically, then a handful of hard-coded colours are patched below.
   ========================================================================== */

/* ---------- Navbar toggle button (both themes) ---------- */
.nx-nav-actions{display:flex;align-items:center;gap:8px}
.nx-theme-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:35px;height:35px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);cursor:pointer;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease,transform .2s ease}
.nx-theme-toggle:hover{background:rgba(255,255,255,.12);color:#fff}
.nx-theme-toggle:active{transform:scale(.94)}
.nx-theme-toggle:focus-visible{outline:2px solid #ff6b35;outline-offset:2px}
.nx-theme-toggle svg{display:block;transition:transform .45s cubic-bezier(.16,1,.3,1),opacity .25s ease}
.nx-theme-toggle .nx-icon-moon{position:absolute;opacity:0;transform:rotate(-70deg) scale(.6)}
/* dark mode shows the sun (= "go light"), light mode shows the moon (= "go dark") */
html[data-theme="light"] .nx-theme-toggle .nx-icon-sun{opacity:0;transform:rotate(70deg) scale(.6)}
html[data-theme="light"] .nx-theme-toggle .nx-icon-moon{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){.nx-theme-toggle,.nx-theme-toggle svg{transition:none!important}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* ==========================================================================
   LIGHT THEME
   ========================================================================== */
html[data-theme="light"]{
  color-scheme:light;
  /* ink (was white) */
  --color-white:#16140f;
  /* surfaces (were near-black) */
  --color-night-900:#f7f6f2;
  --color-night-850:#f1efe9;
  --color-night-800:#ffffff;
  --color-night-700:#e4e1d9;
  /* neutral scale mirrored */
  --color-neutral-50:#0a0a0a;
  --color-neutral-100:#171717;
  --color-neutral-200:#262626;
  --color-neutral-300:#404040;
  --color-neutral-400:#525252;
  --color-neutral-500:#737373;
  --color-neutral-600:#a1a1a1;
  --color-neutral-700:#d4d4d4;
  --color-neutral-800:#e5e5e5;
  --color-neutral-900:#f5f5f5;
  --color-neutral-950:#fafafa;
}
html[data-theme="light"] body{background-color:var(--color-night-900)}

/* Toggle button in light mode */
html[data-theme="light"] .nx-theme-toggle{background:rgba(22,20,15,.05);color:rgba(22,20,15,.7);box-shadow:inset 0 0 0 1px rgba(22,20,15,.1)}
html[data-theme="light"] .nx-theme-toggle:hover{background:rgba(22,20,15,.1);color:#16140f}

/* Frosted navbar */
html[data-theme="light"] header>div>div[aria-hidden="true"]{background:rgba(255,255,255,.82)!important;border-color:rgba(22,20,15,.09)!important;box-shadow:0 10px 30px -14px rgba(60,50,30,.28),inset 0 1px 0 rgba(255,255,255,.9)!important}

/* ==========================================================================
   Light theme — component patches
   ========================================================================== */
html[data-theme="light"]{--nx-ink-rgb:22,20,15;--nx-lift:1}

/* ---- Dark "islands": product mock-ups / demo stages stay dark on the light page.
        They re-pin the original dark tokens so everything inside renders exactly as before. ---- */
html[data-theme="light"] :is(
  [class~="bg-[#141414]"]:not(.rounded-full),[class~="bg-[#121212]"]:not(.rounded-full),[class~="bg-[#141312]"]:not(.rounded-full),[class~="bg-[#0a0a0b]"]:not(.rounded-full),
  [class~="bg-[#181818]"]:not(.rounded-full),[class~="bg-[#151414]"]:not(.rounded-full),[class~="bg-[rgb(17,14,7)]"]:not(.rounded-full),
  .group:has(>img[data-nimg="fill"])
){
  --color-white:#fff;
  --color-black:#000;
  --color-night-900:#0d0d0d;
  --color-night-850:#111112;
  --color-night-800:#161616;
  --color-night-700:#262626;
  --color-neutral-50:#fafafa;--color-neutral-100:#f5f5f5;--color-neutral-200:#e5e5e5;--color-neutral-300:#d4d4d4;
  --color-neutral-400:#a1a1a1;--color-neutral-500:#737373;--color-neutral-600:#525252;--color-neutral-700:#404040;
  --color-neutral-800:#262626;--color-neutral-900:#171717;--color-neutral-950:#0a0a0a;
  --nx-ink-rgb:255,255,255;
  --nx-lift:0;
}

/* ---- Primary pill buttons (white pill / black text in dark) → ink pill / white text ---- */
html[data-theme="light"] .bg-white.text-black,
html[data-theme="light"] .bg-white[class*="text-black"]{--color-black:#fff}
html[data-theme="light"] :is([class~="bg-[#141414]"]:not(.rounded-full),[class~="bg-[#121212]"]:not(.rounded-full),[class~="bg-[#141312]"]:not(.rounded-full),[class~="bg-[rgb(17,14,7)]"]:not(.rounded-full)) .bg-white.text-black{--color-black:#000}
/* white info chips floating on the cream statement section stay white */
html[data-theme="light"] .bg-white[class*="border-black"]{--color-white:#fff}

/* ---- Hero line-art (SVG gradient strokes) ---- */
html[data-theme="light"] :is(#nx-wave,#nx-wave-line,#nx-wave-line-m) stop{stop-color:#16140f}
html[data-theme="light"] svg[class*="opacity-80"]{opacity:.55}

/* ---- Big dark radial glow behind "How it works" → soft warm glow ---- */
html[data-theme="light"] img[src*="96e58f9b388376cf4ecd"]{opacity:0}
html[data-theme="light"] div:has(>img[src*="96e58f9b388376cf4ecd"]){background:radial-gradient(closest-side,rgba(255,107,53,.10),rgba(255,107,53,.04) 55%,transparent 100%)}

/* ---- Agent cards: dark gradient header panel → light ---- */
html[data-theme="light"] [style*="linear-gradient(155deg, #171717 0%, #0f0f0f 100%)"]{background-image:linear-gradient(155deg,#ffffff 0%,#efede6 100%)!important}

/* ---- Dashed connector lines & striped chart bars ---- */
html[data-theme="light"] [style*="repeating-linear-gradient(180deg, rgba(255,255,255,0.3) 0 4px"]{background:repeating-linear-gradient(180deg,rgba(var(--nx-ink-rgb),.28) 0 4px,transparent 4px 9px)!important}
html[data-theme="light"] [style*="repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 4px"]{background:repeating-linear-gradient(90deg,rgba(var(--nx-ink-rgb),.28) 0 4px,transparent 4px 9px)!important}
html[data-theme="light"] [style*="repeating-linear-gradient(180deg, rgba(255,255,255,0.25) 0 3px"]{background:repeating-linear-gradient(180deg,rgba(var(--nx-ink-rgb),.25) 0 3px,transparent 3px 7px)!important}
html[data-theme="light"] [class*="repeating-linear-gradient(to_bottom,rgba(255,255,255,0.35)"]{background-image:repeating-linear-gradient(to bottom,rgba(var(--nx-ink-rgb),.5) 0 3px,transparent 3px 6px)!important}
html[data-theme="light"] [class*="linear-gradient(rgba(255,255,255,0.05)_1px"]{background-image:linear-gradient(rgba(var(--nx-ink-rgb),.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--nx-ink-rgb),.06) 1px,transparent 1px)!important}

/* ---- Shimmering gradient headings (background-clip:text) ---- */
html[data-theme="light"] [style*="-webkit-background-clip:text"]{background-image:linear-gradient(120deg,rgba(var(--nx-ink-rgb),.7) 0%,rgba(var(--nx-ink-rgb),.7) 35%,rgb(var(--nx-ink-rgb)) 50%,rgba(var(--nx-ink-rgb),.7) 65%,rgba(var(--nx-ink-rgb),.7) 100%)!important}

/* ---- Dark scrim over gradient panels: light panels get a soft white veil instead; islands keep the original ---- */
html[data-theme="light"] [style*="rgba(10,10,10,0.12) 0%"]{background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.38) 100%)!important}
html[data-theme="light"] :is(
  [class~="bg-[#141414]"]:not(.rounded-full),[class~="bg-[#121212]"]:not(.rounded-full),[class~="bg-[#141312]"]:not(.rounded-full),[class~="bg-[#0a0a0b]"]:not(.rounded-full),
  [class~="bg-[#181818]"]:not(.rounded-full),[class~="bg-[#151414]"]:not(.rounded-full),[class~="bg-[rgb(17,14,7)]"]:not(.rounded-full),.group:has(>img[data-nimg="fill"])
) [style*="rgba(10,10,10,0.12) 0%"]{background:linear-gradient(180deg,rgba(10,10,10,.12) 0%,rgba(10,10,10,.4) 100%)!important}

/* ---- Stats chart ---- */
html[data-theme="light"] [class*="repeating-linear-gradient(to_bottom,white_0_3px"]{background-image:repeating-linear-gradient(to bottom,rgba(var(--nx-ink-rgb),.85) 0 3px,transparent 3px 6px)!important}
html[data-theme="light"] [class*="radial-gradient(ellipse_at_50%_20%,rgba(255,255,255,0.18)"]{background-image:radial-gradient(ellipse at 50% 20%,rgba(255,107,53,.14),transparent 70%)!important}

/* ---- Case tabs: active label sits on an ink pill → white text ---- */
html[data-theme="light"] button[class*="rounded-full"][class*="text-black"]:not(.bg-white){--color-black:#fff}

/* Small pill / circle chips that hard-code a dark fill (e.g. stepper bullets) follow the theme instead of being islands */
html[data-theme="light"] .rounded-full:is([class~="bg-[#141414]"],[class~="bg-[#121212]"],[class~="bg-[#181818]"],[class~="bg-[#151414]"]){background-color:var(--color-night-800)}

/* ==========================================================================
   BARI landing page (/bari) — it ships its own hard-coded white-on-dark styles
   ========================================================================== */
html[data-theme="light"] .bari-editorial{
  --bari-art-hot:color-mix(in srgb,black 58%,var(--color-night-900));
  --bari-art-light:color-mix(in srgb,black 28%,var(--color-night-900));
  --bari-line:rgba(22,20,15,.16);
  --bari-muted:rgba(22,20,15,.62);
  color:#16140f;
}
html[data-theme="light"] .bari-masthead a:hover,
html[data-theme="light"] .bari-hero h1>span:last-child,
html[data-theme="light"] .bari-dimension[data-open=true] .bari-dimension-name,
html[data-theme="light"] .bari-manifesto .bari-verdict-line,
html[data-theme="light"] .bari-six-mark{color:#16140f}
html[data-theme="light"] .bari-dimension-intro{color:#16140f!important}
html[data-theme="light"] .bari-signal-lines{color:#16140f;opacity:.2}
html[data-theme="light"] .bari-tier-track{background:rgba(22,20,15,.04)}
html[data-theme="light"] .bari-tier-track i{background:linear-gradient(90deg,rgba(22,20,15,.03),rgba(22,20,15,.16))}
html[data-theme="light"] .bari-tier[open] .bari-tier-track i{background:linear-gradient(90deg,rgba(255,107,53,.06),rgba(255,107,53,.34))}
html[data-theme="light"] .bari-tier-track i:after{background:linear-gradient(90deg,transparent,rgba(22,20,15,.07))}
html[data-theme="light"] .bari-dimension[data-open=true]{background:linear-gradient(100deg,rgba(22,20,15,.04),transparent 75%)}
html[data-theme="light"] .bari-color-cloud{background:radial-gradient(at 60% 52%,rgba(255,107,53,.14) 0%,rgba(255,107,53,.06) 32%,transparent 72%)}
html[data-theme="light"] .bari-manifesto-wash{background:radial-gradient(at 50% 56%,rgba(255,107,53,.07),transparent 55%)}
html[data-theme="light"] .bari-report-graph:before{background:radial-gradient(rgba(22,20,15,.04),transparent 65%)}
html[data-theme="light"] .bari-film-grain{mix-blend-mode:multiply;opacity:.08}
html[data-theme="light"] .bari-features article{background:linear-gradient(150deg,rgba(255,255,255,.7),transparent 65%),var(--color-night-800)}
html[data-theme="light"] .bari-feature-art{background:radial-gradient(at 50% 100%,rgba(255,107,53,.08),transparent 70%)}
html[data-theme="light"] .bari-pricing article[data-highlighted=true]{background:radial-gradient(ellipse at 100% 0%,rgba(255,107,53,.1),transparent 70%),var(--color-night-800)}
html[data-theme="light"] .bari-floating-signal{background:linear-gradient(135deg,#fff,var(--color-night-850) 85%);border-color:rgba(22,20,15,.12);box-shadow:0 16px 36px rgba(60,50,30,.16)}
html[data-theme="light"] .bari-manifesto h2{text-shadow:0 3px 28px var(--color-night-900)}

/* ==========================================================================
   preview.css hard-codes white for a few interactive bits — re-point them to the ink colour
   ========================================================================== */
html[data-theme="light"] #faq .nx-preview-faq-panel{color:rgba(var(--nx-ink-rgb),.68)}
html[data-theme="light"] #faq button[aria-expanded="true"]>span{color:rgb(var(--nx-ink-rgb))!important}
html[data-theme="light"] #faq li.nx-preview-faq-open{border-color:rgba(var(--nx-ink-rgb),.22)}

/* ==========================================================================
   /case diagrams + other hard-coded white SVG strokes/fills
   Colours come from the --nx-ink-rgb token: ink on the light page, white inside dark islands.
   ========================================================================== */
/* The red "Lajur enterprise agents" panel is a dark island */
html[data-theme="light"] :is(.rounded-card,.rounded-hero,.rounded-field):has(>[aria-hidden="true"]>[style*="linear-gradient(155deg, rgb(194,46,53)"],>[aria-hidden="true"]>[style*="linear-gradient(155deg, #c22e35"]){
  --color-white:#fff;
  --color-black:#000;
  --color-night-900:#0d0d0d;
  --color-night-850:#111112;
  --color-night-800:#161616;
  --color-night-700:#262626;
  --nx-ink-rgb:255,255,255;
  --nx-lift:0;
}
/* wires between the source systems / agents / destinations */
html[data-theme="light"] [stroke="rgba(255,255,255,0.32)"]{stroke:rgba(var(--nx-ink-rgb),.4)}
html[data-theme="light"] [stroke="rgba(255,255,255,0.22)"]{stroke:rgba(var(--nx-ink-rgb),.28)}
html[data-theme="light"] [stroke="rgba(255,255,255,0.14)"]{stroke:rgba(var(--nx-ink-rgb),.2)}
html[data-theme="light"] [stroke="rgba(255,255,255,0.12)"]{stroke:rgba(var(--nx-ink-rgb),.18)}
html[data-theme="light"] [stroke="rgba(255,255,255,0.10)"]{stroke:rgba(var(--nx-ink-rgb),.14)}
html[data-theme="light"] [stroke="white"]{stroke:rgb(var(--nx-ink-rgb))}
html[data-theme="light"] [fill="rgba(255,255,255,0.55)"]{fill:rgba(var(--nx-ink-rgb),.6)}
html[data-theme="light"] [fill="rgba(255,255,255,0.45)"]{fill:rgba(var(--nx-ink-rgb),.55)}
/* source/destination badges (ERP, CRM, WA …) get their colour from JS */
html[data-theme="light"] [style*="color: rgba(255, 255, 255, 0.72)"]{color:rgba(var(--nx-ink-rgb),.72)!important}

/* All SVG gradients that fade from white (hero wave + orbit lines on both sides, etc.) */
html[data-theme="light"] stop[stop-color="#fff"],
html[data-theme="light"] stop[stop-color="white"]{stop-color:rgb(var(--nx-ink-rgb))}

/* ---- Faint text: very low alpha reads fine as light-on-dark but vanishes as dark-on-light, so lift it.
        --nx-lift is 1 on the light page and 0 inside dark islands (which keep their original alphas).
        :where() keeps specificity low so hover/group-hover variants still win. ---- */
:where(html[data-theme="light"]) .text-white\/20{color:rgba(var(--nx-ink-rgb),calc(.20 + .16*var(--nx-lift)))}
:where(html[data-theme="light"]) .text-white\/25{color:rgba(var(--nx-ink-rgb),calc(.25 + .16*var(--nx-lift)))}
:where(html[data-theme="light"]) .text-white\/30{color:rgba(var(--nx-ink-rgb),calc(.30 + .16*var(--nx-lift)))}
:where(html[data-theme="light"]) .text-white\/35{color:rgba(var(--nx-ink-rgb),calc(.35 + .15*var(--nx-lift)))}
:where(html[data-theme="light"]) .text-white\/40{color:rgba(var(--nx-ink-rgb),calc(.40 + .14*var(--nx-lift)))}
:where(html[data-theme="light"]) .text-white\/45{color:rgba(var(--nx-ink-rgb),calc(.45 + .13*var(--nx-lift)))}

/* BARI accent labels use a pale orange (--color-brand-100) that is unreadable on light surfaces */
html[data-theme="light"] .bari-editorial{--color-brand-100:#c8440c}