/* ============================================================
   Clinically AI — ALT theme layer
   Loads AFTER style.css. Adds:
     1) gradient display headings (both light & dark)
     2) subtle orb / glow background textures
     3) a full [data-theme="dark"] palette (deep tones)
   Light mode = the current build. Dark mode = deep palette
   melded from the v11 reference.
   ============================================================ */

:root{
  /* reference brand stops used for gradient text */
  --g-blue:#6c8eff; --g-purple:#b36cff; --g-pink:#ff5db1;
  --g-peach:#fcae7c; --g-lilac:#c9a3ff;
  /* cool gradient reads on white (light) and deep purple (dark) */
  --text-grad-cool:linear-gradient(135deg,var(--g-blue) 0%,var(--g-purple) 50%,var(--g-pink) 100%);
  /* high-luminance gradient for headings that sit on already-dark surfaces
     (kept light so it stays legible over the purple hero/banners) */
  --text-grad-warm:linear-gradient(120deg,#EAF1FF 0%,#FFCEEA 46%,#FFE6CC 100%);
}

/* ---------- 1. Gradient display headings ---------- */
/* Section titles sit on light (or deep) surfaces → cool gradient */
.section h2,.section--soft h2,.section--tint h2,
.tlt-head h2,.why-fw h2,.why-glass h2{
  background:var(--text-grad-cool);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  /* keep a solid fallback for engines without background-clip:text */
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .section h2,.section--soft h2,.section--tint h2{color:var(--plum)}
}
/* Headings on already-dark hero/banner surfaces → warm/bright gradient */
.hero h1,.page-hero h1,.ayw-title,.pbh-title,.mon-title,.cta-band h2,.flow h2{
  background:var(--text-grad-warm);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:none;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1,.page-hero h1,.ayw-title,.pbh-title,.mon-title,.cta-band h2,.flow h2{color:#fff}
}
/* keep gradient headings from clipping descenders */
.section h2,.section--soft h2,.section--tint h2,.hero h1,.page-hero h1,
.ayw-title,.pbh-title,.mon-title,.cta-band h2,.flow h2{padding-bottom:.06em}
/* Promote gradient headings that sit over animated/clipped backgrounds to
   their own compositing layer. Without this, Chromium can paint
   background-clip:text as solid dark over the animated hero gradient.
   (Do NOT use `filter` here — it re-triggers the same clip-text bug.) */
.hero h1,.page-hero h1,.ayw-title,.pbh-title,.mon-title,.cta-band h2,.flow h2{
  transform:translateZ(0);
}

/* ---------- 2. Subtle background textures ---------- */
/* faint ambient orbs — light mode (very soft) */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 30% at 12% 10%,rgba(179,108,255,.06),transparent 70%),
    radial-gradient(34% 26% at 88% 24%,rgba(255,93,177,.05),transparent 70%),
    radial-gradient(42% 34% at 74% 92%,rgba(108,142,255,.05),transparent 70%);
}
/* glassy sheen on soft/tint sections */
.section--soft,.section--tint{position:relative}

/* ---------- 3. Dark theme ---------- */
[data-theme="dark"]{
  --ink:#F1E9F7; --muted:rgba(241,233,247,.64); --line:rgba(255,255,255,.12);
  --bg:#1a0830; --bg-soft:#160a2b; --bg-tint:#1f0d3a;
  --plum:#EBD9F2; --plum-deep:#0e0420;
  --purple:#D89CE6; --magenta:#F06FB2; --violet:#C68CF0;
  --shadow-sm:0 2px 12px rgba(0,0,0,.45);
  --shadow:0 24px 60px rgba(196,78,210,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
/* deeper ambient orbs in dark */
[data-theme="dark"] body::before{
  background:
    radial-gradient(40% 30% at 14% 12%,rgba(179,108,255,.16),transparent 70%),
    radial-gradient(36% 28% at 86% 26%,rgba(255,93,177,.12),transparent 70%),
    radial-gradient(46% 36% at 72% 90%,rgba(108,142,255,.13),transparent 70%);
}
/* surfaces: white → deep */
[data-theme="dark"] .section{background:var(--bg)}
[data-theme="dark"] .section--soft{background:var(--bg-soft)}
[data-theme="dark"] .section--tint{background:var(--bg-tint)}
[data-theme="dark"] .logos{background:var(--bg);border-color:var(--line)}
[data-theme="dark"] .marquee-track span{color:#E9DAF3;opacity:.7}

/* glass cards */
[data-theme="dark"] .card,
[data-theme="dark"] .acc-item,
[data-theme="dark"] .dna-card,
[data-theme="dark"] .blogcard,
[data-theme="dark"] .res-card,
[data-theme="dark"] .linkcard,
[data-theme="dark"] .agent-card,
[data-theme="dark"] .quotecard,
[data-theme="dark"] .team-card{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--ink);
}
[data-theme="dark"] .card h3,
[data-theme="dark"] .card h4{color:#F3ECF7}
[data-theme="dark"] .card p,
[data-theme="dark"] .blogpost p,
[data-theme="dark"] .blogpost li,
[data-theme="dark"] .res-card p,
[data-theme="dark"] .agent-grid .agent-card p,
[data-theme="dark"] .faq-a,
[data-theme="dark"] .acc-body,
[data-theme="dark"] .legal,
[data-theme="dark"] .legal p,
[data-theme="dark"] .legal li{color:rgba(241,233,247,.74)}
[data-theme="dark"] .blogpost h3{color:#EBD9F2}
[data-theme="dark"] p{color:var(--ink)}
[data-theme="dark"] .lead{color:rgba(241,233,247,.82)}

/* card hover glow tuned for dark */
[data-theme="dark"] .card:hover,
[data-theme="dark"] .feat-grid .card:hover,
[data-theme="dark"] .why-glass .card:hover,
[data-theme="dark"] .res-card:hover,
[data-theme="dark"] .linkcard:hover,
[data-theme="dark"] .agent-card:hover,
[data-theme="dark"] .blogcard:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(216,140,230,.45);
}

/* accents / links */
[data-theme="dark"] a{color:#E7A6EE}
[data-theme="dark"] .linkcard-go,
[data-theme="dark"] .blogcard .linkcard-go{color:#E7A6EE}
[data-theme="dark"] .eyebrow{color:#F0A6D6}
[data-theme="dark"] .caption,[data-theme="dark"] .muted{color:var(--muted)}

/* pills / badges stay legible on dark */
[data-theme="dark"] .pill{background:rgba(216,140,230,.18);color:#F0D6F5}
[data-theme="dark"] .pill--soon{background:rgba(255,187,81,.18);color:#FFD79A}
[data-theme="dark"] .agent-badge--live{background:rgba(29,158,117,.24);color:#7DE9C4}
[data-theme="dark"] .agent-badge--soon{background:rgba(140,140,255,.22);color:#C7C7FF}
[data-theme="dark"] .trust span,[data-theme="dark"] .trust-bar span{color:rgba(241,233,247,.8)}

/* accordion / faq surfaces */
[data-theme="dark"] .acc-q,[data-theme="dark"] .faq-q{color:#F3ECF7}
[data-theme="dark"] .acc-item:hover{box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* inputs, dividers, hr */
[data-theme="dark"] hr{border-color:var(--line)}

/* keep the already-dark sections crisp: hero/flow/tlt/banners need no change,
   but nudge the plain hero gradient a touch deeper to match the palette */
[data-theme="dark"] .hero{--grad-hero:linear-gradient(120deg,#2a0e44 0%,#5B2470 45%,#8E2E86 75%,#b36cff 120%)}

/* footer already dark; deepen slightly in dark mode */
[data-theme="dark"] .site-footer{background:var(--plum-deep)}

/* ---------- 4. Footer theme toggle control ---------- */
.theme-toggle-wrap{display:flex;justify-content:center;margin:8px 0 22px}
.theme-toggle{display:inline-flex;align-items:center;gap:12px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:#fff;border-radius:999px;padding:8px 8px 8px 16px;font-family:var(--font-body);
  font-size:.9rem;font-weight:600;transition:background .2s,border-color .2s}
.theme-toggle:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.32)}
.theme-toggle .tt-label{letter-spacing:.01em;color:rgba(255,255,255,.92)}
.theme-toggle .tt-track{position:relative;width:46px;height:26px;border-radius:999px;
  background:linear-gradient(135deg,var(--g-blue),var(--g-purple) 55%,var(--g-pink));
  flex:none;box-shadow:inset 0 1px 3px rgba(0,0,0,.35);transition:filter .2s}
.theme-toggle .tt-thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
  transition:transform .28s cubic-bezier(.4,0,.2,1)}
.theme-toggle .tt-thumb svg{width:13px;height:13px;color:#6A2C74}
/* thumb icons: show moon in dark, sun in light */
.theme-toggle .tt-sun{display:block}
.theme-toggle .tt-moon{display:none}
[data-theme="dark"] .theme-toggle .tt-thumb{transform:translateX(20px)}
[data-theme="dark"] .theme-toggle .tt-sun{display:none}
[data-theme="dark"] .theme-toggle .tt-moon{display:block}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .theme-toggle .tt-thumb{transition:none}
}

/* ============================================================
   Dark-mode ADA / readability fixes
   ============================================================ */
/* Always-light UI mockups (simulated product screens keep white surfaces):
   restore light-mode ink tokens locally so their text stays dark & legible. */
[data-theme="dark"] .hero-side,
[data-theme="dark"] .hero-docbuilder,
[data-theme="dark"] .chat-phone,
[data-theme="dark"] .phone-screen,
[data-theme="dark"] .tlt-chip-in,
[data-theme="dark"] .tlt-out{
  --ink:#2f2a33; --muted:#6b6b72; --plum:#6A2C74; --purple:#BF56C2; --magenta:#DD569F; --line:#ECDDEF;
  color:#2f2a33;
}
/* Why framework: lighten dark accent text that sits on the deep section.
   (The node icons live on light chips and must keep the dark --wp, so we
   target only the on-dark text here, not .why-node.) */
[data-theme="dark"] .why-meter-a{color:#ff9ec4}
[data-theme="dark"] .why-meter-b,
[data-theme="dark"] .why-panel h3,
[data-theme="dark"] .why-panel h3 em,
[data-theme="dark"] .why-lead em,
[data-theme="dark"] .why-take em{color:#d9b8ff}
/* Enterprise DNA helix section: re-theme its self-contained component vars
   for dark mode (was a hardcoded light panel). Text/greys go light, glass
   surfaces go dark; brand-primary kept so the CTA's white label stays AA. */
[data-theme="dark"] .dna3d-section,
[data-theme="dark"] .dna3d-sticky{background:#160a2b}
[data-theme="dark"] .dna3d-section{
  --text-primary:#F1E9F7; --text-secondary:rgba(241,233,247,.72);
  --grey-100:rgba(255,255,255,.10); --grey-300:rgba(255,255,255,.18); --grey-400:rgba(255,255,255,.45);
}
[data-theme="dark"] .dna3d-box{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
[data-theme="dark"] .dna3d-card{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
/* Remaining hardcoded dark body text that lands on now-dark surfaces */
[data-theme="dark"] .checks li,
[data-theme="dark"] .cmp-i,
[data-theme="dark"] .cmp-risk,
[data-theme="dark"] .acc-body p,
[data-theme="dark"] .dna-card p{color:rgba(241,233,247,.80)}

/* CTA buttons: the generic dark-mode link color must NOT bleed into button
   labels (buttons are <a> tags). Restore the intended label colors. */
[data-theme="dark"] .btn--primary{color:#3a1f04}
[data-theme="dark"] .btn--secondary,
[data-theme="dark"] .btn--ghost{color:#fff}
[data-theme="dark"] .btn--ghost-plum{color:#F0DFF7;border-color:#D89CE6}
[data-theme="dark"] .btn--ghost-plum:hover{background:#7d5fd6;color:#fff}