/* Lexa UI polish layer — tokens from Radix Colors (MIT) + Open Props (MIT). Loaded last. */
@import url("/vendor/radix-colors/lexa-radix.css");
@import url("/vendor/open-props/shadows.min.css");
@import url("/vendor/open-props/easings.min.css");

:root {
  --lx-grad: linear-gradient(135deg, var(--cyan-9), var(--teal-9));
  --bg: var(--slate-1); --bg-subtle: var(--slate-2);
  --surface: var(--slate-1); --surface-elevated: #fff; --surface-active: var(--slate-3);
  --line: var(--slate-6); --line-strong: var(--slate-7); --line-glow: var(--teal-7);
  --fg: var(--slate-12); --fg-strong: var(--slate-12); --muted: var(--slate-11); --fg-dim: var(--slate-10);
  --accent: var(--teal-11); --accent-light: var(--teal-10); --accent-glow: var(--teal-a4);
  --accent-cyan: var(--cyan-11); --accent-emerald: var(--teal-11);
  --ok: var(--teal-11); --err: #c2324a; --warn: #9a6700;
  --radius: 12px;
  color-scheme: light;
}
html.dark {
  --bg: var(--slate-1); --bg-subtle: var(--slate-2);
  --surface: var(--slate-2); --surface-elevated: var(--slate-3); --surface-active: var(--slate-4);
  --surface-elevated: var(--slate-3);
  --ok: var(--teal-11); --err: #ff8c9f; --warn: #f1c46a;
  color-scheme: dark;
}
html { color-scheme: inherit; }
html, body { background-color: var(--bg) !important; color: var(--fg); }
body { line-height: 1.6; text-rendering: optimizeLegibility; }

/* decorative layers: calmer */
.blueprint-grid, .ambient-scatter, .bloom { opacity: .25 !important; }
#webgl-canvas { opacity: .35; }
html.dark #webgl-canvas { opacity: .7; }

/* nav */
.nav, .nav.is-stuck, .side {
  background: color-mix(in srgb, var(--bg) 82%, transparent) !important;
  border-color: var(--line) !important; box-shadow: var(--shadow-2) !important;
  backdrop-filter: saturate(1.4) blur(12px);
}
.brand img { box-shadow: none !important; }
.nav nav a { color: var(--muted) !important; }
.nav nav a:hover { color: var(--fg) !important; background: var(--slate-3) !important; }

/* buttons */
.nav .pill, .btn-primary, button.primary, .btn.primary, button[type="submit"] {
  background: var(--lx-grad) !important; color: #fff !important; border: 0 !important;
  box-shadow: var(--shadow-2) !important; text-shadow: none !important;
  transition: transform .15s var(--ease-out-3, ease), box-shadow .15s ease;
}
.nav .pill:hover, .btn-primary:hover, button[type="submit"]:hover { transform: translateY(-1px); box-shadow: var(--shadow-3) !important; }
.btn-secondary { background: var(--surface-elevated) !important; color: var(--fg) !important; border: 1px solid var(--line) !important; }

/* surfaces */
.space-card, .grid-adv article, .compliance-box, .download-panel, .mobile-card, .qr-box, .table-card,
.sandbox-card, .telemetry-strip, .window, .pair figure, .web-engine-box, .preview-metric-card,
.card, .panel, .box, .stat {
  background: var(--surface-elevated) !important; border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important; box-shadow: var(--shadow-2) !important;
}
.space-card:hover, .grid-adv article:hover, .sandbox-card:hover, .pair figure:hover { box-shadow: var(--shadow-3) !important; border-color: var(--line-strong) !important; }
.grid-adv article::before { display: none !important; }
.telemetry-node strong, .grid-adv h3, .sandbox-card h3, .compliance-box h4 { color: var(--fg) !important; text-shadow: none !important; }
.grid-adv p, .hero-row p, .space-features p, .prose p, .prose li, .compliance-box p { color: var(--muted) !important; }
.kicker { color: var(--accent) !important; }
h1, h2 { text-shadow: none !important; }
.benchmark-table th { background: var(--slate-3) !important; color: var(--fg) !important; }
.benchmark-table td { border-color: var(--line) !important; }
.benchmark-table .col-highlight, .benchmark-table tbody tr:hover td.col-highlight { background: var(--teal-a3) !important; }
.benchmark-table tbody tr:hover td { background: var(--slate-a3) !important; }
.prose code, code { background: var(--slate-3); color: var(--slate-12); border-radius: 6px; }

/* keep code/console/viewport dark in both themes */
.engine-code-panel, .sandbox-live-console, .gods-eye-viewport { background: #0d1117 !important; color: #e6edf3; }

/* forms */
input, select, textarea {
  background: var(--surface-elevated) !important; color: var(--fg) !important;
  border: 1px solid var(--line-strong) !important; border-radius: 10px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal-8) !important; box-shadow: 0 0 0 3px var(--teal-a5) !important; }
:focus-visible { outline: 2px solid var(--teal-9); outline-offset: 2px; }
a { text-underline-offset: 3px; }

/* theme segmented control (lucide icons) */
.lx-theme-seg {
  position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: inline-flex; gap: 2px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface-elevated); box-shadow: var(--shadow-3);
}
.lx-theme-seg button { width: 32px; height: 28px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; opacity: .6; }
.lx-theme-seg button:hover { opacity: 1; background: var(--slate-3); }
.lx-theme-seg button[aria-checked="true"] { opacity: 1; background: var(--teal-a4); box-shadow: inset 0 0 0 1px var(--teal-a7); }
.lx-theme-seg img { width: 16px; height: 16px; }
html.dark .lx-theme-seg img { filter: invert(1); }
@media (max-width: 720px) {
  .nav nav { overflow-x: auto; scrollbar-width: none; }
  .lx-theme-seg { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---- light-mode fixes for legacy dark sections ---- */
html:not(.dark) .telemetry-node,
html:not(.dark) .engine-tab-bar,
html:not(.dark) .engine-preview-panel,
html:not(.dark) .preview-browser-frame,
html:not(.dark) .privacy-card { background: #fff !important; border-color: var(--line) !important; }
html:not(.dark) .preview-browser-bar { background: var(--slate-3) !important; }
html:not(.dark) .engine-tab { background: transparent !important; color: var(--slate-11) !important; }
html:not(.dark) .engine-tab.is-active, html:not(.dark) .engine-tab:hover { background: var(--teal-a3) !important; color: var(--teal-11) !important; }
html:not(.dark) .preview-url { color: var(--cyan-11) !important; }
html:not(.dark) .sandbox-type-tag, html:not(.dark) .tag-warn { color: #8a5a00 !important; }
html:not(.dark) main :is(h1,h2,h3,h4,strong,span,p,li,td,th):not(pre *):not(.gods-eye-viewport *):not(.sandbox-live-console *):not(.engine-code-panel *):not(.btn-primary):not(.btn-primary *):not(.pill):not(.station-photo *) { color: var(--slate-12); }
html:not(.dark) main :is(p,li,td):not(pre *):not(.gods-eye-viewport *):not(.sandbox-live-console *):not(.engine-code-panel *):not(.station-photo *) { color: var(--slate-11) !important; }
html:not(.dark) .privacy-card :is(h1,h2,p,li,strong) { color: var(--slate-12) !important; }
html:not(.dark) .privacy-card :is(p,li) { color: var(--slate-11) !important; }
/* docs (docs.css is dark-first) */
html:not(.dark) .nav { background: color-mix(in srgb, var(--slate-1) 85%, transparent) !important; }
html:not(.dark) :is(.doc, .docs, article, .toc, aside) :is(h1,h2,h3,h4,strong,span,a.active):not(pre *) { color: var(--slate-12) !important; }
html:not(.dark) :is(.doc, .docs, article, .toc, aside) :is(p,li,td):not(pre *) { color: var(--slate-11) !important; }
html:not(.dark) :is(.doc, .docs, article, main) :not(pre) > code { background: var(--slate-3) !important; color: var(--slate-12) !important; }
html:not(.dark) :is(article, main, .docs) th { background: var(--slate-3) !important; color: var(--slate-12) !important; }
html:not(.dark) .copy-btn { background: var(--slate-4) !important; color: var(--slate-12) !important; }
html:not(.dark) aside a, html:not(.dark) .toc a { color: var(--slate-11) !important; }
html:not(.dark) aside a.active, html:not(.dark) .toc a.active { color: var(--teal-11) !important; background: var(--teal-a3) !important; }
html:not(.dark) .search-dialog, html:not(.dark) .search-box, html:not(.dark) .search-trigger { background: #fff !important; color: var(--slate-12) !important; border-color: var(--line) !important; }
html:not(.dark) .search-dialog * { color: var(--slate-12); }
html:not(.dark) .download-panel h3, html:not(.dark) .preview-browser-body strong, html:not(.dark) .preview-browser-body h3 { color: var(--slate-12) !important; }
html:not(.dark) .preview-browser-body { background: #fff !important; }
html:not(.dark) .skip { color: #fff !important; }