/* ==========================================================================
   XPERA — light theme
   ==========================================================================

   Loaded on every page, AFTER the page's own stylesheets. It does nothing
   until <html> carries data-theme="light", which js/theme-toggle.js sets
   (and a small inline script in each <head> sets before first paint, so the
   page never flashes dark).

   Why an override sheet rather than variables in the base CSS: the site
   paints its colours in three different places — the css/ partials, an
   inline <style> in every page, and roughly nine hundred Tailwind
   arbitrary-value classes such as text-[#f3e8ff] baked into the markup.
   Re-pointing all three at custom properties would mean rewriting every
   page and both generators. Overriding here reaches all three from one
   file, and deleting this file returns the site to exactly what it was.

   Specificity: :root[data-theme='light'] scores 0,2,0, so it outranks the
   bare class selectors it overrides. Rules aimed at #xpera-isolated-footer
   repeat the id, because an id would otherwise win.
   ========================================================================== */

:root[data-theme='light'] {
    /* Surfaces, lightest to deepest */
    --lm-bg: #f6f2fd;
    --lm-bg-alt: #ece4fa;
    --lm-surface: #ffffff;
    --lm-surface-2: #faf7ff;
    --lm-surface-3: #f1eafc;

    /* Ink. --lm-ink replaces #f3e8ff, --lm-ink-body replaces #e9d5ff. */
    --lm-ink: #1c1030;
    --lm-ink-body: #443a5e;
    --lm-ink-muted: #635873;

    /* Accents. #b366ff only scores 2.6:1 on a light ground, so anything that
       carries meaning drops to #7e22ce (6.6:1) and #b366ff is kept for fills
       and decoration only. */
    --lm-accent: #7e22ce;
    --lm-accent-strong: #6b21a8;
    --lm-accent-soft: #a855f7;

    --lm-line: rgba(126, 34, 206, 0.16);
    --lm-line-strong: rgba(126, 34, 206, 0.32);
    --lm-shadow: 0 10px 30px rgba(76, 29, 149, 0.1);
    --lm-shadow-lg: 0 20px 50px rgba(76, 29, 149, 0.14);

    color-scheme: light;
}

/* --------------------------------------------------------------- base --- */

:root[data-theme='light'] body {
    background-color: var(--lm-bg);
    color: var(--lm-ink-body);
}

:root[data-theme='light'] ::-webkit-scrollbar-track {
    background: var(--lm-bg-alt);
}
:root[data-theme='light'] ::-webkit-scrollbar-thumb {
    background: var(--lm-accent-soft);
}
:root[data-theme='light'] ::selection {
    background: rgba(126, 34, 206, 0.18);
    color: var(--lm-ink);
}

/* The custom cursor is a white dot with a white halo — invisible on a light
   ground, so it becomes the brand purple. */
:root[data-theme='light'] .cursor-dot {
    background: var(--lm-accent);
    box-shadow: 0 0 10px rgba(126, 34, 206, 0.6);
}
:root[data-theme='light'] .cursor-glow {
    background: radial-gradient(circle, rgba(126, 34, 206, 0.18) 0%, transparent 70%);
    border-color: rgba(126, 34, 206, 0.35);
}

/* ------------------------------------- Tailwind arbitrary-value classes --- */
/* The markup names these colours directly, so the mapping has to be explicit.
   Grouped by the role each colour plays in the dark theme. */

/* Headings and near-white text */
:root[data-theme='light'] .text-\[\#f3e8ff\],
:root[data-theme='light'] .text-white {
    color: var(--lm-ink);
}

/* Body copy */
:root[data-theme='light'] .text-\[\#e9d5ff\] {
    color: var(--lm-ink-body);
}

/* Accent text. All four dark accents collapse to one readable purple. */
:root[data-theme='light'] .text-\[\#b366ff\],
:root[data-theme='light'] .text-\[\#d8b4fe\],
:root[data-theme='light'] .text-\[\#ab61f4\],
:root[data-theme='light'] .text-\[\#a78bfa\],
:root[data-theme='light'] .text-\[\#a855f7\],
:root[data-theme='light'] .text-\[\#c98bff\],
:root[data-theme='light'] .text-brand-light,
:root[data-theme='light'] .text-brand-soft,
:root[data-theme='light'] .text-brand-purple {
    color: var(--lm-accent);
}

/* Tailwind's own purple/gray ramps, used in a few places */
:root[data-theme='light'] .text-purple-200\/70,
:root[data-theme='light'] .text-purple-200,
:root[data-theme='light'] .text-gray-400,
:root[data-theme='light'] .text-gray-500 {
    color: var(--lm-ink-muted);
}

/* Text that sat on a bright purple fill stays dark — the fill stays bright. */
:root[data-theme='light'] .text-\[\#06020b\],
:root[data-theme='light'] .text-\[\#2e1065\] {
    color: #2a0f45;
}

/* Bright fills keep their colour: a saturated purple pill reads well on a
   light page and keeps the brand present. */
:root[data-theme='light'] .bg-\[\#b366ff\],
:root[data-theme='light'] .bg-brand-purple {
    background-color: var(--lm-accent-soft);
}
:root[data-theme='light'] .bg-\[\#7e22ce\],
:root[data-theme='light'] .bg-\[\#a855f7\],
:root[data-theme='light'] .bg-\[\#d8b4fe\] {
    background-color: var(--lm-accent);
}

/* Dark panel and page fills become light surfaces. */
:root[data-theme='light'] .bg-\[\#06020b\],
:root[data-theme='light'] .bg-dark {
    background-color: var(--lm-bg);
}
:root[data-theme='light'] .bg-\[\#11081f\],
:root[data-theme='light'] .bg-\[\#0b0514\],
:root[data-theme='light'] .bg-\[\#0d041a\],
:root[data-theme='light'] .bg-\[\#0e041a\],
:root[data-theme='light'] .bg-\[\#080310\],
:root[data-theme='light'] .bg-\[\#150524\],
:root[data-theme='light'] .bg-\[\#150a25\],
:root[data-theme='light'] .bg-\[\#1a0b2e\],
:root[data-theme='light'] .bg-\[\#1e0b36\],
:root[data-theme='light'] .bg-\[\#2a1b3d\],
:root[data-theme='light'] .bg-\[\#2e1065\],
:root[data-theme='light'] .bg-\[\#4a2e7c\],
:root[data-theme='light'] .bg-\[\#581c87\] {
    background-color: var(--lm-surface);
}

/* Borders: dark hairlines become tinted, bright ones become stronger tint. */
:root[data-theme='light'] .border-\[\#2a1b3d\],
:root[data-theme='light'] .border-\[\#1e0b36\],
:root[data-theme='light'] .border-\[\#4c1d95\],
:root[data-theme='light'] .border-\[\#581c87\],
:root[data-theme='light'] .border-\[\#7e22ce\] {
    border-color: var(--lm-line);
}
:root[data-theme='light'] .border-\[\#b366ff\],
:root[data-theme='light'] .border-\[\#d8b4fe\],
:root[data-theme='light'] .border-\[\#a855f7\],
:root[data-theme='light'] .border-\[\#f3e8ff\] {
    border-color: var(--lm-line-strong);
}

/* Gradient stops. Tailwind v3 stores these in custom properties, and
   --tw-gradient-stops resolves them at use time, so redefining the endpoint
   here is enough. Only stops that run to a DARK colour need flipping —
   a low-alpha purple stop simply tints a light ground lavender and is
   left alone on purpose. */
:root[data-theme='light'] .from-\[\#06020b\] {
    --tw-gradient-from: var(--lm-bg) var(--tw-gradient-from-position);
}
:root[data-theme='light'] .from-\[\#150524\],
:root[data-theme='light'] .from-\[\#1b0a30\],
:root[data-theme='light'] .from-\[\#2e1065\] {
    --tw-gradient-from: var(--lm-surface-2) var(--tw-gradient-from-position);
}
:root[data-theme='light'] .to-\[\#06020b\],
:root[data-theme='light'] .to-\[\#0a0212\],
:root[data-theme='light'] .to-\[\#0a0314\] {
    --tw-gradient-to: var(--lm-bg) var(--tw-gradient-to-position);
}
:root[data-theme='light'] .to-\[\#2e1065\],
:root[data-theme='light'] .to-\[\#581c87\] {
    --tw-gradient-to: var(--lm-surface-3) var(--tw-gradient-to-position);
}

/* ------------------------------------------------------------- header --- */

:root[data-theme='light'] .xpera-hdr-wrapper {
    background-color: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--lm-line);
    box-shadow: 0 1px 24px rgba(76, 29, 149, 0.06);
}
:root[data-theme='light'] .xpera-hdr-link {
    color: var(--lm-accent);
}
:root[data-theme='light'] .xpera-hdr-link:hover {
    color: var(--lm-ink);
    text-shadow: none;
}
:root[data-theme='light'] .xpera-hdr-link.active {
    color: var(--lm-ink);
    font-weight: 700;
}
:root[data-theme='light'] .xpera-hdr-mobile-btn {
    color: var(--lm-accent);
}
/* The wordmark is drawn light-on-dark; darken it so it reads on white. */
:root[data-theme='light'] .xpera-hdr-img-logo {
    filter: brightness(0);
}

:root[data-theme='light'] .xpera-mobile-overlay {
    background: rgba(255, 255, 255, 0.96);
}
:root[data-theme='light'] .xpera-mobile-overlay a {
    color: var(--lm-accent);
}
:root[data-theme='light'] .xpera-mobile-overlay a:hover {
    color: var(--lm-ink);
}
:root[data-theme='light'] .xpera-mobile-close {
    color: var(--lm-accent);
}

/* ------------------------------------------------------------- footer --- */

:root[data-theme='light'] #xpera-isolated-footer {
    background-color: var(--lm-bg-alt);
    background-image: radial-gradient(
        circle at 50% 0%,
        rgba(126, 34, 206, 0.08) 0%,
        transparent 60%
    );
    color: var(--lm-ink-body);
    border-top: 1px solid var(--lm-line);
}
:root[data-theme='light'] #xpera-isolated-footer a {
    color: var(--lm-ink-body);
}
:root[data-theme='light'] #xpera-isolated-footer a:hover {
    color: var(--lm-accent-strong);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-col-title {
    color: var(--lm-accent);
    text-shadow: none;
}
:root[data-theme='light'] #xpera-isolated-footer .xif-tagline {
    color: var(--lm-ink-muted);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-social-icons a {
    border: 1px solid var(--lm-line-strong);
    color: var(--lm-accent);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-social-icons a:hover {
    background: var(--lm-accent);
    border-color: var(--lm-accent);
    color: #ffffff;
}
:root[data-theme='light'] #xpera-isolated-footer .xif-contact-col a i {
    color: var(--lm-accent);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-divider {
    background: linear-gradient(90deg, transparent, var(--lm-line-strong), transparent);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-bottom-bar,
:root[data-theme='light'] #xpera-isolated-footer .xif-bottom-bar a {
    color: var(--lm-ink-muted);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-logo-img {
    filter: brightness(0);
}

/* ------------------------------------------- adapted decorative layer --- */
/* The dark theme's atmosphere is purple light emitted onto black. Light mode
   cannot emit, so each effect is restated as pigment ON white: the same hues
   at low alpha, and glow replaced by soft depth. */

/* Full-screen moonlight wash. The dark keyframes pulse a purple veil toward
   black; this pulses a pale lavender veil instead, under its own name so the
   dark animation is untouched. */
:root[data-theme='light'] .global-moonlight-sync {
    animation-name: lm-moonlight-bg;
}
@keyframes lm-moonlight-bg {
    0%,
    100% {
        background-color: rgba(168, 85, 247, 0.07);
    }
    50% {
        background-color: rgba(246, 242, 253, 0);
    }
}

/* Centre glow behind hero and section blocks. */
:root[data-theme='light'] .premium-center-glow {
    background: radial-gradient(
        circle at center,
        rgba(168, 85, 247, 0.12) 0%,
        rgba(126, 34, 206, 0.06) 40%,
        transparent 75%
    );
}
:root[data-theme='light'] .premium-center-glow.dimmed {
    background: radial-gradient(
        circle at center,
        rgba(168, 85, 247, 0.07) 0%,
        transparent 70%
    );
}

/* Neon text glow has no light-mode equivalent; depth comes from weight and
   colour instead. */
:root[data-theme='light'] .title-glow {
    text-shadow: none;
}

/* Galaxy band behind the closing CTA becomes a soft lavender sky. */
:root[data-theme='light'] .galaxy-wrapper {
    background-color: var(--lm-bg-alt);
}
:root[data-theme='light'] .galaxy-spiral {
    background: conic-gradient(
        from 0deg,
        transparent 0%,
        rgba(126, 34, 206, 0.1) 20%,
        transparent 40%,
        transparent 50%,
        rgba(168, 85, 247, 0.1) 70%,
        transparent 90%
    );
    opacity: 0.7;
}

/* The about-page moon: a glowing white orb on black. In light it becomes a
   soft lavender orb that casts a shadow rather than emitting light. */
:root[data-theme='light'] .moon-glow-sync {
    animation-name: lm-moon-glow;
}
@keyframes lm-moon-glow {
    0%,
    100% {
        box-shadow: 0 0 50px rgba(126, 34, 206, 0.25);
        opacity: 1;
    }
    50% {
        box-shadow: 0 0 18px rgba(126, 34, 206, 0.1);
        opacity: 0.75;
    }
}
/* Its inner disc is a black circle faking the crescent — invert to the page. */
:root[data-theme='light'] .moon-phase-shadow {
    background: var(--lm-bg) !important;
}

/* Frosted panels: dark glass becomes white glass. */
:root[data-theme='light'] .glass-panel {
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--lm-line);
    box-shadow: var(--lm-shadow);
}
:root[data-theme='light'] .glass-panel:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--lm-line-strong);
    box-shadow: var(--lm-shadow-lg);
}
:root[data-theme='light'] .spaceship-panel {
    background: linear-gradient(160deg, #ffffff 0%, var(--lm-surface-2) 100%);
    border: 1px solid var(--lm-line);
    border-top: 2px solid var(--lm-line-strong);
    box-shadow: var(--lm-shadow-lg);
}
:root[data-theme='light'] .text-outline-permanent {
    color: var(--lm-accent) !important;
    -webkit-text-stroke: 1px var(--lm-line-strong);
}

/* --------------------------------------------------- forms and buttons --- */

:root[data-theme='light'] .vintage-horizontal-form {
    border: 1px solid var(--lm-line);
    background: linear-gradient(180deg, #ffffff 0%, var(--lm-surface-2) 100%);
    box-shadow: var(--lm-shadow-lg);
}
:root[data-theme='light'] .vintage-input {
    border-bottom: 1px solid var(--lm-line-strong);
    color: var(--lm-ink);
}
:root[data-theme='light'] .vintage-input::placeholder {
    color: var(--lm-ink-muted);
}
:root[data-theme='light'] .vintage-input:focus {
    border-bottom-color: var(--lm-accent);
    box-shadow: 0 1px 0 0 var(--lm-accent);
}

:root[data-theme='light'] .btn-premium-submit {
    background: linear-gradient(135deg, var(--lm-accent), var(--lm-accent-soft));
    color: #ffffff;
    border: 1px solid var(--lm-accent-strong);
}
:root[data-theme='light'] .btn-premium-submit:hover {
    background: linear-gradient(135deg, var(--lm-accent-strong), var(--lm-accent));
    color: #ffffff;
    border-color: var(--lm-accent-strong);
    box-shadow: var(--lm-shadow-lg);
}
:root[data-theme='light'] .btn-premium:hover i {
    color: #ffffff !important;
}
:root[data-theme='light'] .btn-light-purple,
:root[data-theme='light'] .hero-action-btn,
:root[data-theme='light'] .ingenuity-btn,
:root[data-theme='light'] .apple-btn-hover {
    background: linear-gradient(135deg, var(--lm-accent), var(--lm-accent-soft));
    color: #ffffff;
    border-color: var(--lm-accent-strong);
}
:root[data-theme='light'] .hero-unified-form-wrapper,
:root[data-theme='light'] .ingenuity-form-wrapper {
    background: #ffffff;
    border: 1px solid var(--lm-line);
    box-shadow: var(--lm-shadow);
}
:root[data-theme='light'] .hero-unified-form-inner {
    background: #ffffff;
}

/* ------------------------------------------------- home page internals --- */

:root[data-theme='light'] .blueprint-canvas {
    background-color: var(--lm-surface-2);
    background-image:
        linear-gradient(rgba(126, 34, 206, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(126, 34, 206, 0.07) 1px, transparent 1px);
}
:root[data-theme='light'] .n8n-node-premium,
:root[data-theme='light'] .flow-node,
:root[data-theme='light'] .flow-node-mobile {
    background: #ffffff;
    border: 1px solid var(--lm-line);
    box-shadow: var(--lm-shadow);
    color: var(--lm-ink);
}
:root[data-theme='light'] .n8n-node-premium:hover,
:root[data-theme='light'] .flow-node:hover {
    border-color: var(--lm-line-strong);
    box-shadow: var(--lm-shadow-lg);
}
:root[data-theme='light'] .json-block {
    background: var(--lm-surface-3);
    border: 1px solid var(--lm-line);
    color: var(--lm-ink-body);
}
:root[data-theme='light'] .json-key {
    color: var(--lm-accent);
}
:root[data-theme='light'] .json-val-str {
    color: #0f766e;
}
:root[data-theme='light'] .json-val-num {
    color: #b45309;
}
:root[data-theme='light'] .tech-carousel-pill {
    background-color: #ffffff;
    border-color: var(--lm-line);
}
:root[data-theme='light'] .tech-carousel-pill:hover {
    background-color: var(--lm-surface-3) !important;
    border-color: var(--lm-accent-soft);
}
/* Partner and tool logos are supplied as white PNGs for a dark ground. */
:root[data-theme='light'] .logo-filter {
    filter: brightness(0.3) saturate(1.4);
}
:root[data-theme='light'] .logo-filter:hover {
    filter: brightness(0.15) saturate(1.6);
}
:root[data-theme='light'] .word-illuminate {
    color: rgba(28, 16, 48, 0.22);
}

/* ------------------------------------------------ article page classes --- */

:root[data-theme='light'] .art-body {
    color: var(--lm-ink-body);
}
:root[data-theme='light'] .art-body h2 {
    color: var(--lm-ink);
}
:root[data-theme='light'] .art-body h3 {
    color: var(--lm-accent);
}
:root[data-theme='light'] .art-body strong {
    color: var(--lm-ink);
}
:root[data-theme='light'] .art-body a {
    color: var(--lm-accent-strong);
}
:root[data-theme='light'] .art-body a:hover {
    color: var(--lm-ink);
}
:root[data-theme='light'] .art-body ul li::before {
    background: var(--lm-accent);
    box-shadow: none;
}
:root[data-theme='light'] .art-body ol li::before {
    color: var(--lm-accent);
}
:root[data-theme='light'] .art-callout {
    border: 1px solid var(--lm-line);
    background: var(--lm-surface-3);
}
:root[data-theme='light'] .art-tag {
    border: 1px solid var(--lm-line-strong);
    color: var(--lm-accent);
}
:root[data-theme='light'] .art-card {
    border: 1px solid var(--lm-line);
    background: #ffffff;
    box-shadow: var(--lm-shadow);
}
:root[data-theme='light'] .art-card:hover {
    border-color: var(--lm-line-strong);
    box-shadow: var(--lm-shadow-lg);
}
:root[data-theme='light'] .art-hero {
    border: 1px solid var(--lm-line);
    box-shadow: var(--lm-shadow);
}
:root[data-theme='light'] .art-card-img {
    border-bottom: 1px solid var(--lm-line);
}
:root[data-theme='light'] .art-toc a {
    color: var(--lm-ink-body);
}
:root[data-theme='light'] .art-toc a:hover {
    color: var(--lm-accent);
}

/* ------------------------------------------------ service page classes --- */

:root[data-theme='light'] .sp-section {
    border-top: 1px solid var(--lm-line);
}
:root[data-theme='light'] .sp-h1,
:root[data-theme='light'] .sp-h2,
:root[data-theme='light'] .sp-card-h,
:root[data-theme='light'] .sp-step-h,
:root[data-theme='light'] .sp-outcome-h,
:root[data-theme='light'] .sp-faq-q,
:root[data-theme='light'] .sp-link-card-h {
    color: var(--lm-ink);
}
:root[data-theme='light'] .sp-lede,
:root[data-theme='light'] .sp-card-p,
:root[data-theme='light'] .sp-step-p,
:root[data-theme='light'] .sp-faq-a,
:root[data-theme='light'] .sp-hero-lead {
    color: var(--lm-ink-body);
}
:root[data-theme='light'] .sp-crumbs,
:root[data-theme='light'] .sp-crumb-current {
    color: var(--lm-ink-muted);
}
:root[data-theme='light'] .sp-crumbs a:hover {
    color: var(--lm-accent);
}
:root[data-theme='light'] .sp-hero-icon {
    color: var(--lm-accent);
    border: 1px solid var(--lm-line-strong);
    background: var(--lm-surface-3);
    box-shadow: none;
}
:root[data-theme='light'] .sp-hero-num,
:root[data-theme='light'] .sp-other-num {
    color: transparent;
    -webkit-text-stroke: 1px var(--lm-line-strong);
}
:root[data-theme='light'] .sp-btn-primary {
    background: linear-gradient(135deg, var(--lm-accent), var(--lm-accent-soft));
    color: #ffffff;
    border: 1px solid var(--lm-accent-strong);
    box-shadow: var(--lm-shadow);
}
:root[data-theme='light'] .sp-btn-ghost {
    color: var(--lm-accent);
    border: 1px solid var(--lm-line-strong);
    background: var(--lm-surface-3);
}
:root[data-theme='light'] .sp-btn-ghost:hover {
    color: var(--lm-ink);
    border-color: var(--lm-accent);
    background: var(--lm-surface-2);
}
:root[data-theme='light'] .sp-signal {
    border: 1px solid var(--lm-line);
    background: #ffffff;
    color: var(--lm-ink-body);
}
:root[data-theme='light'] .sp-signal i,
:root[data-theme='light'] .sp-outcome-h i {
    color: var(--lm-accent);
    filter: none;
}
:root[data-theme='light'] .sp-card {
    border: 1px solid var(--lm-line);
    background: #ffffff;
    box-shadow: var(--lm-shadow);
}
:root[data-theme='light'] .sp-card:hover,
:root[data-theme='light'] .sp-link-card:hover {
    border-color: var(--lm-line-strong);
    box-shadow: var(--lm-shadow-lg);
}
:root[data-theme='light'] .sp-card-icon {
    color: var(--lm-accent);
    border: 1px solid var(--lm-line-strong);
    background: var(--lm-surface-3);
}
:root[data-theme='light'] .sp-step-num {
    color: var(--lm-accent);
    border: 1px solid var(--lm-line-strong);
    background: var(--lm-surface-3);
    box-shadow: none;
}
:root[data-theme='light'] .sp-step:not(:last-child)::before {
    background: linear-gradient(180deg, var(--lm-line-strong), transparent);
}
:root[data-theme='light'] .sp-step-when,
:root[data-theme='light'] .sp-tag {
    border: 1px solid var(--lm-line-strong);
    color: var(--lm-accent);
}
:root[data-theme='light'] .sp-outcome {
    border: 1px solid var(--lm-line);
    background: var(--lm-surface-3);
}
:root[data-theme='light'] .sp-chip {
    color: var(--lm-ink-body);
    border: 1px solid var(--lm-line);
    background: #ffffff;
}
:root[data-theme='light'] .sp-chip:hover {
    border-color: var(--lm-accent-soft);
    color: var(--lm-ink);
}
:root[data-theme='light'] .sp-faq {
    border: 1px solid var(--lm-line);
    background: #ffffff;
}
:root[data-theme='light'] .sp-faq[open] {
    border-color: var(--lm-line-strong);
}
:root[data-theme='light'] .sp-faq-chevron {
    color: var(--lm-accent);
}
:root[data-theme='light'] .sp-link-card {
    border: 1px solid var(--lm-line);
    background: #ffffff;
    box-shadow: var(--lm-shadow);
}
:root[data-theme='light'] .sp-other-arrow,
:root[data-theme='light'] .sp-back a {
    color: var(--lm-accent);
}
:root[data-theme='light'] .sp-form-shell {
    border: 1px solid var(--lm-line);
    background: linear-gradient(180deg, #ffffff 0%, var(--lm-surface-2) 100%);
    box-shadow: var(--lm-shadow-lg);
}
:root[data-theme='light'] .sp-form-h {
    color: var(--lm-ink);
}
:root[data-theme='light'] .sp-form-sub {
    color: var(--lm-ink-muted);
}
:root[data-theme='light'] .sp-diamond {
    background-color: var(--lm-accent-soft);
}

/* ----------------------------------------------------- services index --- */

:root[data-theme='light'] .svc-panel {
    border: 1px solid var(--lm-line);
    background: linear-gradient(135deg, #ffffff 0%, var(--lm-surface-2) 100%);
    box-shadow: var(--lm-shadow);
}
:root[data-theme='light'] .svc-panel:hover {
    border-color: var(--lm-line-strong);
    box-shadow: var(--lm-shadow-lg);
}
:root[data-theme='light'] .svc-icon-ring {
    border: 1px solid var(--lm-line-strong);
    background: var(--lm-surface-3);
    box-shadow: none;
}
:root[data-theme='light'] .svc-num {
    -webkit-text-stroke: 1px var(--lm-line-strong);
}
:root[data-theme='light'] .svc-bullet i {
    color: var(--lm-accent);
    filter: none;
}
:root[data-theme='light'] .svc-cta {
    color: var(--lm-accent);
    border: 1px solid var(--lm-line-strong);
    background: var(--lm-surface-3);
}
:root[data-theme='light'] .svc-panel:hover .svc-cta {
    background: var(--lm-accent);
    border-color: var(--lm-accent);
    color: #ffffff;
}
:root[data-theme='light'] .svc-divider {
    background: linear-gradient(90deg, transparent, var(--lm-line-strong), transparent);
}

/* ------------------------------ opacity variants and palette classes --- */
/* Tailwind treats text-[#e9d5ff] and text-[#e9d5ff]/80 as two unrelated
   classes, and the markup uses eleven such faded variants. Matching on the
   class attribute catches the whole family at once. The faded buckets keep a
   quieter voice by mapping to the muted ink rather than inheriting full
   strength, so the type hierarchy survives the theme change. */

:root[data-theme='light'] [class*='text-[#f3e8ff]'] {
    color: var(--lm-ink);
}
:root[data-theme='light'] [class*='text-[#e9d5ff]'] {
    color: var(--lm-ink-body);
}
:root[data-theme='light'] [class*='text-[#b366ff]'],
:root[data-theme='light'] [class*='text-[#d8b4fe]'],
:root[data-theme='light'] [class*='text-[#c98bff]'] {
    color: var(--lm-accent);
}
/* /30 through /70 are the deliberately-quiet ones. */
:root[data-theme='light'] [class*='text-[#e9d5ff]/3'],
:root[data-theme='light'] [class*='text-[#e9d5ff]/4'],
:root[data-theme='light'] [class*='text-[#e9d5ff]/5'],
:root[data-theme='light'] [class*='text-[#e9d5ff]/6'],
:root[data-theme='light'] [class*='text-[#e9d5ff]/7'],
:root[data-theme='light'] [class*='text-[#d8b4fe]/3'],
:root[data-theme='light'] [class*='text-[#d8b4fe]/4'],
:root[data-theme='light'] [class*='text-[#d8b4fe]/5'],
:root[data-theme='light'] [class*='text-[#d8b4fe]/6'],
:root[data-theme='light'] [class*='text-[#b366ff]/6'],
:root[data-theme='light'] [class*='text-[#b366ff]/7'] {
    color: var(--lm-ink-muted);
}

/* Tailwind's stock purple/gray ramps, used alongside the arbitrary values. */
:root[data-theme='light'] [class*='text-purple-50'],
:root[data-theme='light'] [class*='text-purple-100'] {
    color: var(--lm-ink);
}
:root[data-theme='light'] [class*='text-purple-200'],
:root[data-theme='light'] [class*='text-purple-300'],
:root[data-theme='light'] [class*='text-gray-3'],
:root[data-theme='light'] [class*='text-gray-4'],
:root[data-theme='light'] [class*='text-gray-5'] {
    color: var(--lm-ink-muted);
}

/* White hairlines were drawn to catch light against black. */
:root[data-theme='light'] [class*='border-white'] {
    border-color: var(--lm-line);
}

/* Faded dark fills. */
:root[data-theme='light'] [class*='bg-[#06020b]'],
:root[data-theme='light'] [class*='bg-[#1a0b2e]'] {
    background-color: var(--lm-surface-2);
}

/* ------------------------------------------- remaining dark surfaces --- */

/* The workflow band on the home page paints its own near-black ground with a
   purple dot grid. Same grid, inverted ground. */
:root[data-theme='light'] .workflow-env {
    background-color: var(--lm-surface-2);
    background-image: radial-gradient(rgba(126, 34, 206, 0.22) 1px, transparent 1px);
}
:root[data-theme='light'] .automation-warp-premium,
:root[data-theme='light'] .jet-trace {
    background: var(--lm-surface-3);
}

/* Text sitting inside buttons and pills that carry a purple fill stays white;
   these rules exist so the fill is actually painted in light mode rather than
   inherited from a dark-only gradient. */
:root[data-theme='light'] .btn-light-purple,
:root[data-theme='light'] .btn-light-purple:hover,
:root[data-theme='light'] .hero-action-btn:hover,
:root[data-theme='light'] .ingenuity-btn:hover {
    color: #ffffff;
}

/* ------------------------------------------ privacy policy (style3) --- */
/* This page has its own base and footer stylesheets, which colour by element
   and by .policy-* / .xif-* classes rather than by Tailwind utilities. */

:root[data-theme='light'] .policy-content h2 {
    color: var(--lm-accent);
}
:root[data-theme='light'] .policy-content p,
:root[data-theme='light'] .policy-content ul li {
    color: var(--lm-ink-body);
}
:root[data-theme='light'] .policy-content strong {
    color: var(--lm-ink);
}
:root[data-theme='light'] .policy-content ul li::before {
    background-color: var(--lm-accent);
}
:root[data-theme='light'] .text-highlight {
    background: linear-gradient(120deg, var(--lm-accent), var(--lm-accent-soft));
    /* The shorthand above resets background-clip, so restate it or the
       gradient paints the element box instead of the glyphs. */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* style3's footer is a separate design from the shared one. */
:root[data-theme='light'] #xpera-isolated-footer .xif-nav-link,
:root[data-theme='light'] #xpera-isolated-footer .xif-email-link,
:root[data-theme='light'] #xpera-isolated-footer .xif-social-link {
    color: var(--lm-ink-body);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-nav-link:hover,
:root[data-theme='light'] #xpera-isolated-footer .xif-email-link:hover,
:root[data-theme='light'] #xpera-isolated-footer .xif-social-link:hover,
:root[data-theme='light'] #xpera-isolated-footer .xif-nav-link.active {
    color: var(--lm-accent-strong);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-serif-heading {
    color: var(--lm-ink);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-email-label,
:root[data-theme='light'] #xpera-isolated-footer .xif-copyright {
    color: var(--lm-ink-muted);
}
:root[data-theme='light'] #xpera-isolated-footer .xif-giant-text {
    background: linear-gradient(
        180deg,
        var(--lm-accent-soft) 0%,
        var(--lm-accent) 40%,
        rgba(246, 242, 253, 0.1) 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------ clipped + svg paint --- */

/* The hero wordmark paints #e9d5ff through background-clip: text, which is
   all but invisible on a light ground. Same technique, inked instead. */
:root[data-theme='light'] .shiny-purple-sweep {
    background: linear-gradient(90deg, #2a0f45 0%, var(--lm-accent) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
:root[data-theme='light'] .shiny-purple-sweep:hover {
    background: linear-gradient(
        to right,
        #2a0f45 10%,
        #2a0f45 35%,
        var(--lm-accent) 45%,
        var(--lm-accent-soft) 50%,
        var(--lm-accent) 55%,
        #2a0f45 65%,
        #2a0f45 90%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
}
/* A neon halo behind dark type reads as a smudge, so drop it. */
:root[data-theme='light'] .hero-brand-line {
    filter: none;
}

/* Section-divider waves are SVG paths filled with the dark page colour via a
   presentation attribute; any CSS fill outranks it. */
:root[data-theme='light'] path[fill='#06020b'],
:root[data-theme='light'] path[fill='#0a0312'],
:root[data-theme='light'] path[fill='#11081f'] {
    fill: var(--lm-bg);
}

/* -------------------------------------------------- client logo strip --- */
/* Every client mark is white artwork on transparency, drawn for a dark page.
   On a light ground they disappear, and they are not ours to recolour — so
   the strip carries its own dark band in light mode and the logos stay
   readable in both themes. The gradient keeps the brand's purple centre. */

:root[data-theme='light'] .clients-strip {
    background-image: linear-gradient(90deg, #150b28 0%, #2a1245 50%, #150b28 100%);
    border-top: 1px solid rgba(126, 34, 206, 0.45);
    border-bottom: 1px solid rgba(126, 34, 206, 0.45);
    box-shadow: 0 12px 34px rgba(76, 29, 149, 0.18);
}

/* --------------------------------------------------------- the switch --- */
/* A track with a moon at one end, a sun at the other, and a knob that slides
   between them. The header is dir="ltr", so left/right geometry is stable
   even though the pages are right-to-left. */

.xpera-theme-toggle {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 58px;
    height: 30px;
    padding: 0 7px;
    margin-inline-start: 1.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(179, 102, 255, 0.35);
    background: rgba(126, 34, 206, 0.18);
    cursor: pointer;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease;
}
.xpera-theme-toggle:hover {
    border-color: rgba(216, 180, 254, 0.8);
    background: rgba(126, 34, 206, 0.32);
}
.xpera-theme-toggle:focus-visible {
    outline: 2px solid #d8b4fe;
    outline-offset: 3px;
}

/* The icons never move; the knob covers whichever one is active. */
.xpera-theme-ico {
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
    transition: color 0.3s ease;
}
.xpera-theme-ico-moon {
    color: #f3e8ff;
}
.xpera-theme-ico-sun {
    color: rgba(216, 180, 254, 0.45);
}

.xpera-theme-knob {
    position: absolute;
    top: 50%;
    left: 3px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #b366ff, #7e22ce);
    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.55);
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 58 track - 2 borders - 3 left - 3 right - 22 knob = 26px of travel. */
:root[data-theme='light'] .xpera-theme-knob {
    transform: translateX(26px);
}

:root[data-theme='light'] .xpera-theme-toggle {
    border-color: var(--lm-line-strong);
    background: var(--lm-surface-3);
}
:root[data-theme='light'] .xpera-theme-toggle:hover {
    border-color: var(--lm-accent);
    background: #ffffff;
}
:root[data-theme='light'] .xpera-theme-toggle:focus-visible {
    outline-color: var(--lm-accent);
}
:root[data-theme='light'] .xpera-theme-ico-moon {
    color: rgba(126, 34, 206, 0.45);
}
:root[data-theme='light'] .xpera-theme-ico-sun {
    color: var(--lm-accent);
}
:root[data-theme='light'] .xpera-theme-knob {
    background: linear-gradient(135deg, #a855f7, #6b21a8);
    box-shadow: 0 2px 8px rgba(76, 29, 149, 0.35);
}

/* On phones the nav collapses, so the switch sits beside the burger. */
@media (max-width: 768px) {
    .xpera-theme-toggle {
        margin-inline-start: 0.75rem;
    }
}

/* ---------------------------------------------------------------- a11y --- */

/* The site's own high-contrast mode forces black-on-white with !important.
   Light mode must not fight it. */
body.a11y-high-contrast .xpera-theme-toggle {
    border-color: #fff !important;
    background: #000 !important;
}
body.a11y-high-contrast .xpera-theme-ico {
    color: #fff !important;
}

@media (prefers-reduced-motion: reduce) {
    .xpera-theme-toggle,
    .xpera-theme-knob,
    .xpera-theme-ico {
        transition: none;
    }
}
