/* ══════════════════════════════════════════════════════
   LIANIX DOCS UPGRADE v12
   – Coherent color system (matches chat/shell orange/cream)
   – Animated section entrances
   – Better dark mode contrast
   ══════════════════════════════════════════════════════ */

/* ── Root color overrides to match lianix-shell.css orange brand ── */
:root {
  --lx-orange: #e87535;
  --lx-orange-2: #ff9a57;
  --lx-cream: #fff7ee;
  --lx-ink: #201713;
  --lx-panel: #fffdfa;
  --lx-line: rgba(232,117,53,.14);
  --lx-card-bg: rgba(255,253,250,.94);
  --lx-muted: rgb(130,126,115);
}

/* ── Top nav: match brand ── */
#topnav {
  background: rgba(255,253,250,.82) !important;
  border-bottom-color: rgba(232,117,53,.14) !important;
}
[data-theme="dark"] #topnav {
  background: rgba(18,16,14,.88) !important;
  border-bottom-color: rgba(232,117,53,.16) !important;
}
.tn-link.act {
  color: var(--lx-orange) !important;
}
.tn-link .tn-under {
  background: var(--lx-orange) !important;
}

/* ── Docs nav sidebar ── */
.dn-item.act {
  background: rgba(232,117,53,.1) !important;
  color: var(--lx-orange) !important;
  border-left-color: var(--lx-orange) !important;
}
.dn-item:hover {
  color: var(--lx-ink) !important;
}
[data-theme="dark"] .dn-item:hover {
  background: rgba(232,117,53,.08) !important;
  color: rgb(255,180,120) !important;
}

/* ── Hero: orange → cream gradient (not mismatched purples) ── */
.lx-doc-hero {
  background:
    radial-gradient(circle at 78% 12%, rgba(255,159,92,.22), transparent 30%),
    linear-gradient(140deg, #fff7ee 0%, #ffe8d0 55%, #fff7ee 100%) !important;
  color: var(--lx-ink) !important;
  border-bottom: 1px solid rgba(232,117,53,.16) !important;
}
.lx-doc-hero::before {
  background-image:
    linear-gradient(rgba(232,117,53,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,117,53,.055) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
}
.lx-kicker {
  background: #fff !important;
  color: var(--lx-orange) !important;
  border: 1.5px solid rgba(232,117,53,.28) !important;
  box-shadow: 0 4px 14px rgba(232,117,53,.1) !important;
}
.lx-hero-copy h1 {
  text-shadow: none !important;
  color: var(--lx-ink) !important;
}
.lx-hero-copy h1 em {
  color: var(--lx-orange) !important;
  font-style: normal;
}
.lx-hero-copy p {
  color: rgba(32,23,19,.72) !important;
}
.lx-pill {
  border: 1.5px solid rgba(32,21,14,.18) !important;
  background: #fff !important;
  color: var(--lx-ink) !important;
  box-shadow: 0 6px 20px rgba(67,40,22,.07) !important;
}
.lx-pill.primary,
.lx-pill:hover {
  background: var(--lx-orange) !important;
  color: #fff !important;
  border-color: var(--lx-orange) !important;
  box-shadow: 0 12px 28px rgba(232,117,53,.26) !important;
}

/* ── Float cards (hero right side) ── */
.lx-float-card {
  background: rgba(255,253,250,.88) !important;
  border-color: rgba(232,117,53,.22) !important;
  color: var(--lx-ink) !important;
  box-shadow: 0 20px 0 rgba(232,117,53,.12), 0 28px 40px rgba(50,28,14,.08) !important;
}
.lx-float-card i {
  background: var(--lx-orange) !important;
  border-color: var(--lx-orange) !important;
  color: #fff !important;
}
.lx-round-stamp {
  background: var(--lx-ink) !important;
  border-color: var(--lx-cream) !important;
  color: var(--lx-cream) !important;
}

/* ── Section cards ── */
.lx-story-card {
  background: var(--lx-ink) !important;
  color: #fff8ef !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 60px rgba(32,23,19,.15) !important;
}
.lx-story-card h2 {
  color: #fff8ef !important;
}
.lx-story-card p {
  color: #e0cfc4 !important;
}

/* ── Live strip cards ── */
.lx-live-card {
  background: rgba(255,253,250,.94) !important;
  border-color: rgba(232,117,53,.14) !important;
  box-shadow: 0 18px 50px rgba(64,38,20,.08) !important;
}
.lx-live-card b {
  color: var(--lx-orange) !important;
}

/* ── Endpoint stack ── */
.lx-endpoint-stack div {
  background: rgba(255,253,250,.88) !important;
  border-color: rgba(232,117,53,.14) !important;
  box-shadow: 0 8px 24px rgba(70,35,15,.06) !important;
}

/* ── Footer bar ── */
.lx-v107-footer-in {
  background: var(--lx-ink) !important;
}
.lx-v107-footer-actions a:hover {
  background: var(--lx-orange) !important;
  border-color: var(--lx-orange) !important;
}

/* ── Tech marquee strip ── */
.lx-tech-track span {
  background: #fff !important;
  border-color: rgba(232,117,53,.14) !important;
  color: var(--lx-ink) !important;
}

/* ── Articles page body & callouts ── */
.callout {
  background: rgba(232,117,53,.07) !important;
  border-color: rgba(232,117,53,.24) !important;
}
.art-body h2 {
  color: var(--lx-ink) !important;
}
.art-body a {
  color: var(--lx-orange) !important;
}
.art-body code {
  background: rgba(232,117,53,.09) !important;
  color: #c0502a !important;
  border: 1px solid rgba(232,117,53,.16) !important;
}
[data-theme="dark"] .art-body code {
  background: rgba(232,117,53,.13) !important;
  color: rgb(255,170,110) !important;
  border-color: rgba(232,117,53,.2) !important;
}

/* ── Scroll-reveal animations for docs sections ── */
@keyframes lxSlideUp {
  from { opacity: 0; transform: translateY(32px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes lxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lxScaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.lx-anim-up {
  animation: lxSlideUp 0.62s cubic-bezier(.2,.8,.2,1) both;
}
.lx-anim-fade {
  animation: lxFadeIn 0.5s ease both;
}
.lx-anim-scale {
  animation: lxScaleIn 0.52s cubic-bezier(.2,.8,.2,1) both;
}

/* Stagger utility classes */
.lx-delay-1 { animation-delay: 0.08s; }
.lx-delay-2 { animation-delay: 0.16s; }
.lx-delay-3 { animation-delay: 0.26s; }
.lx-delay-4 { animation-delay: 0.38s; }

/* ── Doc nav card hover glow ── */
.dn-item {
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.15s !important;
}
.dn-item:hover {
  transform: translateX(3px) !important;
}
.dn-item.act {
  transform: translateX(4px) !important;
}

/* ── Article reaction buttons ── */
.react-btn:hover {
  background: rgba(232,117,53,.12) !important;
  transform: scale(1.18) !important;
}
.react-btn.sel {
  background: rgba(232,117,53,.16) !important;
}
#react-msg.show {
  color: var(--lx-orange) !important;
}

/* ── Dark mode docs ── */
[data-theme="dark"] .lx-doc-hero,
@media(prefers-color-scheme:dark) {
  :root:not([data-theme="light"]) .lx-doc-hero {
    background: linear-gradient(140deg, rgb(20,16,12) 0%, rgb(28,22,16) 60%, rgb(20,16,12) 100%) !important;
    color: rgb(240,238,232) !important;
    border-bottom-color: rgba(232,117,53,.2) !important;
  }
}
[data-theme="dark"] .lx-doc-hero {
  background: linear-gradient(140deg, rgb(18,15,11) 0%, rgb(26,20,14) 60%, rgb(18,15,11) 100%) !important;
  color: rgb(240,238,232) !important;
  border-bottom-color: rgba(232,117,53,.18) !important;
}
[data-theme="dark"] .lx-doc-hero::before {
  background-image:
    linear-gradient(rgba(232,117,53,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,117,53,.07) 1px, transparent 1px) !important;
}
[data-theme="dark"] .lx-float-card {
  background: rgba(32,28,22,.88) !important;
  border-color: rgba(232,117,53,.2) !important;
  color: rgb(220,216,206) !important;
}
[data-theme="dark"] .lx-live-card {
  background: rgba(28,26,22,.92) !important;
  border-color: rgba(232,117,53,.16) !important;
}
[data-theme="dark"] .lx-story-card {
  background: rgb(22,20,16) !important;
  border: 1px solid rgba(232,117,53,.12) !important;
}
[data-theme="dark"] .lx-endpoint-stack div {
  background: rgba(28,26,22,.88) !important;
  border-color: rgba(232,117,53,.15) !important;
  color: rgb(220,216,206) !important;
}
[data-theme="dark"] .lx-tech-track span {
  background: rgb(28,26,22) !important;
  border-color: rgba(232,117,53,.14) !important;
  color: rgb(220,216,206) !important;
}