/* Lumalyx Design System — static token file */
:root {
  color-scheme: light dark;

  /* Core neutrals: calm lab interface */
  --ink-980: #050914;
  --ink-950: #08111f;
  --ink-900: #0b1320;
  --ink-850: #101b2d;
  --ink-800: #162236;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-300: #cbd5e1;
  --mist-100: #edf5fb;
  --mist-75: #f4f8fb;
  --mist-50: #f8fbfd;
  --white: #ffffff;

  /* Primary spectral palette */
  --optical-blue-900: #193a8a;
  --optical-blue-700: #274fb8;
  --optical-blue-600: #335ff0;
  --photon-cyan-500: #00d6ff;
  --photon-cyan-300: #7deaff;
  --fluor-violet-600: #6d55ff;
  --fluor-violet-400: #9b8cff;
  --trace-green-500: #23d891;
  --trace-green-300: #8dffd2;
  --calibration-amber-500: #ffb84d;
  --warning-rose-500: #ff5f7d;

  /* Semantic tokens */
  --bg: var(--mist-50);
  --surface: rgba(255,255,255,0.82);
  --surface-strong: #ffffff;
  --surface-subtle: #eef5fb;
  --text: var(--ink-950);
  --text-soft: var(--slate-600);
  --border: rgba(30, 64, 110, .14);
  --border-strong: rgba(30, 64, 110, .24);
  --focus: var(--photon-cyan-500);
  --shadow-soft: 0 18px 50px rgba(8, 17, 31, .08);
  --shadow-card: 0 10px 28px rgba(8, 17, 31, .07);
  --shadow-glow: 0 0 0 1px rgba(0, 214, 255, .13), 0 22px 70px rgba(39, 79, 184, .16);

  /* Gradients */
  --gradient-signal: linear-gradient(135deg, var(--optical-blue-700) 0%, var(--fluor-violet-600) 52%, var(--photon-cyan-500) 100%);
  --gradient-line: linear-gradient(90deg, var(--photon-cyan-500), var(--fluor-violet-400), var(--trace-green-500));
  --gradient-quiet: radial-gradient(circle at 18% 10%, rgba(0, 214, 255, .14), transparent 34%), radial-gradient(circle at 84% 18%, rgba(109, 85, 255, .16), transparent 32%);

  /* Radius & spacing */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --container: 1180px;
  --gutter: clamp(18px, 4vw, 40px);

  /* Typography */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --step--1: clamp(.82rem, .78rem + .15vw, .9rem);
  --step-0: clamp(.95rem, .91rem + .2vw, 1.05rem);
  --step-1: clamp(1.08rem, 1rem + .45vw, 1.28rem);
  --step-2: clamp(1.35rem, 1.15rem + .9vw, 1.78rem);
  --step-3: clamp(1.8rem, 1.4rem + 1.8vw, 2.6rem);
  --step-4: clamp(2.35rem, 1.75rem + 3vw, 4.4rem);
  --step-5: clamp(3.2rem, 2.2rem + 5vw, 6.5rem);
}

html[data-theme="dark"] {
  --bg: #050914;
  --surface: rgba(12, 20, 34, .74);
  --surface-strong: #0c1422;
  --surface-subtle: #0f1d32;
  --text: #f4f8fb;
  --text-soft: #b9c7d7;
  --border: rgba(148, 163, 184, .18);
  --border-strong: rgba(148, 163, 184, .28);
  --shadow-soft: 0 22px 80px rgba(0, 0, 0, .28);
  --shadow-card: 0 14px 40px rgba(0, 0, 0, .24);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  background: var(--bg);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
  background: var(--gradient-quiet), linear-gradient(180deg, var(--bg) 0%, var(--surface-subtle) 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .08;
  background-image:
    linear-gradient(to right, currentColor 1px, transparent 1px),
    linear-gradient(to bottom, currentColor 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(circle at 50% 15%, black, transparent 72%);
}
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: rgba(0, 214, 255, .35); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: .5rem; z-index: 1000;
  transform: translateY(-140%); padding: .65rem .9rem; border-radius: var(--radius-sm);
  background: var(--ink-950); color: var(--white);
}
.skip-link:focus { transform: translateY(0); }
.container { width: min(var(--container), calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section-tight { padding: clamp(36px, 6vw, 70px) 0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; line-height: 1; letter-spacing: .14em; text-transform: uppercase;
  color: var(--optical-blue-700); font-weight: 760;
}
html[data-theme="dark"] .eyebrow { color: var(--photon-cyan-300); }
.eyebrow::before { content: ""; width: 30px; height: 2px; border-radius: 999px; background: var(--gradient-line); }
.gradient-text { background: var(--gradient-line); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--text-soft); }
.mini { font-size: var(--step--1); }
.h1, h1 { font-size: var(--step-5); line-height: .95; letter-spacing: -.06em; margin: 0; }
.h2, h2 { font-size: var(--step-4); line-height: 1.02; letter-spacing: -.05em; margin: 0; }
.h3, h3 { font-size: var(--step-2); line-height: 1.15; letter-spacing: -.03em; margin: 0; }
.lead { font-size: var(--step-1); color: var(--text-soft); max-width: 72ch; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.panel { padding: clamp(20px, 3vw, 32px); }
.surface-strong { background: var(--surface-strong); }
.glow-card { box-shadow: var(--shadow-glow); }
.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: .82rem 1.12rem;
  font-weight: 750; letter-spacing: -.01em; cursor: pointer; min-height: 44px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  color: var(--text); background: var(--surface);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--gradient-signal); color: #fff; border-color: transparent; box-shadow: 0 10px 30px rgba(39, 79, 184, .25); }
.btn-secondary { background: var(--surface-strong); }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-small { padding: .58rem .82rem; min-height: 36px; font-size: .86rem; }
.badge {
  display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .6rem; border-radius: 999px;
  font-size: .74rem; font-weight: 760; background: rgba(0, 214, 255, .1); color: var(--optical-blue-700); border: 1px solid rgba(0, 214, 255, .22);
}
html[data-theme="dark"] .badge { color: var(--photon-cyan-300); }
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; min-width: 680px; font-size: .94rem; }
th, td { text-align: left; padding: 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text); background: var(--surface-subtle); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
tr:last-child td { border-bottom: 0; }
@media (max-width: 980px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .span-4, .span-5, .span-6, .span-7, .span-8 { grid-column: span 12; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}