/* ===== InfoPearl Tech: theme layer — Soft Warm (default) + Dark Navy ===== */

/* ---------- Tokens ---------- */
html[data-theme="light"]{
  --bg:#f2ece1; --surface:#f8f3ea; --card:#fbf7f0; --chip:#ebe2d2; --line:#e0d4bf;
  --ink:#0d2434; --muted:#58646c; --brand-ink:#023a56;
  --hdr:rgba(248,243,234,.9); --hdr-solid:rgba(248,243,234,.97);
  --hero-bg:radial-gradient(ellipse at 95% 5%,#a4b9fb1f,transparent 48%),linear-gradient(135deg,#f6f0e5 20%,#efe8dc 65%,#f4e6d2);
  --hero-ink:#023a56; --hero-muted:#55626b;
  --img-panel:#fbf7f0; --shadow:#3d2a1222;
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:#071722; --surface:#0b1f2c; --card:#0f2636; --chip:#132f42; --line:#1d3a4d;
  --ink:#e6eef3; --muted:#9fb2bf; --brand-ink:#f0a234;
  --navy:#032f46; --navy-2:#06405f; --rust:#e08a63; --amber:#f0a234; --amber-ink:#f0a234; --sky:#a4b9fb; --on-navy:#eaf2f7;
  --hdr:rgba(9,27,38,.88); --hdr-solid:rgba(9,27,38,.97);
  --hero-bg:radial-gradient(ellipse at 90% 10%,#a4b9fb18,transparent 50%),radial-gradient(1200px 600px at 85% 30%,#06405f,#04263a 55%,#061823);
  --hero-ink:#eef4f8; --hero-muted:#a9bcc8;
  --img-panel:#e9edf0; --shadow:#00000066;
  color-scheme:dark;
}
html{transition:background-color .4s ease}
body{background:var(--bg)!important;color:var(--ink)}
body,header,.alt,.reg,.pillar,.prod,.plan,.ind,.role,.pb,form,.responsive-strip,.product-showcase{transition:background-color .4s ease,border-color .4s ease,color .4s ease}

/* ---------- Surfaces ---------- */
header{background:var(--hdr)!important;border-bottom:1px solid var(--line)}
header.scrolled{background:var(--hdr-solid)!important}
.alt,.reg,.commerce-feature{background:var(--surface)!important;border-color:var(--line)!important}
.pillar,.prod,.plan,.ind,.role,.pb,.mv>div,.wk,.faq details,.responsive-strip,.product-showcase,form,.cl,.step,.leader,.models>div,.why>div{
  background:var(--card)!important;border-color:var(--line)!important;box-shadow:0 14px 34px -26px var(--shadow)}
.plan.hl{background:var(--navy)!important}
.rg i{background:var(--chip)!important;border-color:var(--line)!important;color:var(--brand-ink)!important}
.pill,.chip,.tabs button{background:var(--chip);color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--navy);color:#fff}
input,select,textarea{background:var(--card)!important;color:var(--ink)!important;border-color:var(--line)!important}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}

/* text that was hard-coded for white backgrounds */
.product-showcase p,.about-feature p,.responsive-strip p,.hero .facts{color:var(--muted)!important}
.ind-art svg{color:var(--brand-ink)!important}

/* ---------- Hero ---------- */
.hero{background:var(--hero-bg)!important;color:var(--hero-ink)!important;border-color:var(--line)!important}
.hero .lede{color:var(--hero-muted)!important}
.hero .h1{color:var(--hero-ink)}
.stage{background:var(--card)!important;border-color:var(--line)!important;box-shadow:0 28px 70px -28px var(--shadow),0 0 0 8px color-mix(in srgb,var(--card) 45%,transparent)!important}
.hero .btn-ghost{color:var(--hero-ink)!important;background:color-mix(in srgb,var(--card) 60%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hero-ink) 25%,transparent)!important}
.sbtn,.to-top{background:var(--card)!important;color:var(--hero-ink)!important;border-color:var(--line)!important}
.sbtn:hover{background:var(--chip)!important}

/* ---------- Illustrations with white backgrounds ---------- */
/* Light: blend the white into the warm card colour */
html[data-theme="light"] :is(.service-image,.process-image,.responsive-image,.contact-image,.career-image,.sl-img,.stage img,.product-showcase img,.about-feature img){mix-blend-mode:multiply}
.service-image,.process-image{background:transparent!important;border-color:var(--line)!important}
.image-collage,.career-image,.contact-image,.work-image,.process-image{border-color:var(--line)!important}
/* Dark: keep illustrations on a soft light panel so they stay readable */
html[data-theme="dark"] :is(.service-image,.process-image,.responsive-image,.contact-image,.career-image){background:var(--img-panel)!important;border-radius:14px}
html[data-theme="dark"] .service-image{border-radius:0}
html[data-theme="dark"] .stage{background:var(--img-panel)!important}
html[data-theme="dark"] .ind-art{filter:saturate(.9) brightness(.92)}
html[data-theme="dark"] .photo-frame img,html[data-theme="dark"] .commerce-image{filter:brightness(.92)}

/* ---------- Effects layer in each theme ---------- */
html[data-theme="dark"] .ip-cursor{mix-blend-mode:screen;background:radial-gradient(circle,rgba(240,162,52,.10),rgba(164,185,251,.07) 40%,transparent 70%)}
html[data-theme="dark"] .head h2{background-image:linear-gradient(100deg,var(--ink) 0%,var(--ink) 35%,#f0a234 50%,#ffd38a 58%,var(--ink) 72%,var(--ink) 100%)}
html[data-theme="dark"] .menu a:not(.btn){color:var(--muted)}
html[data-theme="dark"] .menu a:not(.btn):hover,html[data-theme="dark"] .menu a.active{color:var(--ink)}
html[data-theme="dark"] .brand b{color:#fff}
html[data-theme="dark"] .brand small{color:var(--muted)}
html[data-theme="dark"] .drawer{background:var(--hdr-solid)}
html[data-theme="dark"] .burger{color:var(--ink);border-color:var(--line);background:var(--card)}
html[data-theme="dark"] ::selection{background:#f0a234;color:#071722}

/* ---------- Theme toggle button ---------- */
.ip-theme{position:relative;width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--brand-ink);
  display:grid;place-items:center;cursor:pointer;transition:transform .25s ease,background .3s ease,border-color .3s ease;box-shadow:0 6px 18px -10px var(--shadow)}
.ip-theme:hover{transform:rotate(-12deg) scale(1.06)}
.ip-theme svg{width:20px;height:20px;position:absolute;transition:transform .45s cubic-bezier(.3,1.4,.5,1),opacity .3s ease}
.ip-theme .moon{opacity:1;transform:none}
.ip-theme .sun{opacity:0;transform:rotate(-90deg) scale(.4)}
html[data-theme="dark"] .ip-theme .moon{opacity:0;transform:rotate(90deg) scale(.4)}
html[data-theme="dark"] .ip-theme .sun{opacity:1;transform:none;color:#f0a234}
@media (max-width:520px){.ip-theme{width:40px;height:40px}}
.image-collage{background:var(--card)!important}
html[data-theme="light"] .commerce-image{mix-blend-mode:multiply}

/* WhatsApp button in official WhatsApp green */
.wa{background:#25D366!important;color:#fff!important;border:3px solid #fff!important;box-shadow:0 10px 26px -8px rgba(37,211,102,.65)!important}
.wa:hover{background:#1ebe5b!important}
.wa::before,.wa::after{border-color:rgba(37,211,102,.55)!important}

/* Logo: transparent emblem instead of a white tile */
.brand img.logo-mark{width:auto!important;height:50px!important;background:none!important;border-radius:0!important;padding:0!important;box-shadow:none!important;border:0!important;object-fit:contain}
.logo-on-dark{display:none!important}
html[data-theme="dark"] .logo-on-dark{display:block!important}
html[data-theme="dark"] .logo-on-light{display:none!important}
@media (max-width:520px){.brand img.logo-mark{height:42px!important}}