/* NeuralScout — design tokens */
:root {
  /* Base */
  --ns-bg: #07090c;
  --ns-bg-1: #0b0e13;
  --ns-bg-2: #11151c;
  --ns-bg-3: #161b24;
  --ns-line: #1e2530;
  --ns-line-2: #2a333f;
  --ns-line-3: #3a4656;

  /* Text */
  --ns-fg: #e7ecf3;
  --ns-fg-dim: #9aa4b2;
  --ns-fg-dimmer: #5f6a78;
  --ns-fg-faint: #3b4450;

  /* Surfaces */
  --ns-nav-bg: rgba(7, 9, 12, 0.72);

  /* Signal colors */
  --ns-cyan: #22e3ff;      /* detection / primary */
  --ns-cyan-soft: #22e3ff26;
  --ns-lime: #b6f569;      /* counted / success */
  --ns-lime-soft: #b6f56922;
  --ns-amber: #ffb547;     /* tracking */
  --ns-amber-soft: #ffb54722;
  --ns-coral: #ff6b6b;     /* alert */
  --ns-coral-soft: #ff6b6b22;
  --ns-violet: #b794ff;    /* VLM / AI */
  --ns-violet-soft: #b794ff22;

  /* Accent (tweakable) */
  --ns-accent: var(--ns-cyan);
  --ns-accent-soft: var(--ns-cyan-soft);

  /* Type */
  --ns-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ns-sans: 'Geist', 'Söhne', 'Inter', system-ui, -apple-system, sans-serif;
  --ns-display: 'Geist', 'Söhne', system-ui, sans-serif;

  /* Radius */
  --ns-r-1: 3px;
  --ns-r-2: 6px;
  --ns-r-3: 10px;
  --ns-r-4: 14px;
  --ns-r-5: 20px;

  /* Space */
  --ns-pg: clamp(16px, 3vw, 40px);
  --ns-section: clamp(80px, 10vw, 160px);

  /* Motion */
  --ns-ease: cubic-bezier(.22,.61,.36,1);
  --ns-ease-snap: cubic-bezier(.2,.8,.2,1);
  --ns-speed: 1;
}

[data-theme="light"] {
  --ns-bg: #f6f7f9;
  --ns-bg-1: #ffffff;
  --ns-bg-2: #f1f3f6;
  --ns-bg-3: #e9ecf1;
  --ns-line: #e2e6ec;
  --ns-line-2: #d1d7df;
  --ns-line-3: #b8c0cb;
  --ns-fg: #0b0e13;
  --ns-fg-dim: #4b5563;
  --ns-fg-dimmer: #6b7280;
  --ns-fg-faint: #9aa4b2;
  --ns-nav-bg: rgba(255, 255, 255, 0.78);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ns-bg);
  color: var(--ns-fg);
  font-family: var(--ns-sans);
  font-feature-settings: 'ss01','cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Utilities */
.ns-mono { font-family: var(--ns-mono); letter-spacing: 0.02em; }
.ns-dim { color: var(--ns-fg-dim); }
.ns-dimmer { color: var(--ns-fg-dimmer); }

.ns-eyebrow {
  font-family: var(--ns-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ns-fg-dim);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ns-eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--ns-accent);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--ns-accent);
}

/* Grid backdrop */
.ns-gridbg {
  background-image:
    linear-gradient(var(--ns-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ns-line) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 85%);
}

.ns-dotsbg {
  background-image: radial-gradient(var(--ns-line-2) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Scanline (decorative) */
@keyframes ns-scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: .5; }
  90%  { opacity: .5; }
  100% { transform: translateY(100%); opacity: 0; }
}

/* Detection box pop-in */
@keyframes ns-lock {
  0%   { outline-offset: 10px; opacity: 0; filter: blur(4px); }
  60%  { outline-offset: 0px; opacity: 1; filter: blur(0); }
  100% { outline-offset: 0px; opacity: 1; }
}

@keyframes ns-pulse {
  0%, 100% { opacity: .9; }
  50% { opacity: .35; }
}

@keyframes ns-blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.2; }
}

@keyframes ns-tick {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Corner ticks — viewfinder style */
.ns-corners {
  position: absolute; inset: 0; pointer-events: none;
}
.ns-corners::before, .ns-corners::after,
.ns-corners > span::before, .ns-corners > span::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border-color: var(--ns-accent); border-style: solid; border-width: 0;
}
.ns-corners::before { top: 8px; left: 8px; border-top-width: 1.5px; border-left-width: 1.5px; }
.ns-corners::after { top: 8px; right: 8px; border-top-width: 1.5px; border-right-width: 1.5px; }
.ns-corners > span { position: absolute; inset: 0; }
.ns-corners > span::before { bottom: 8px; left: 8px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
.ns-corners > span::after { bottom: 8px; right: 8px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* buttons */
.ns-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--ns-sans);
  font-size: 14px; font-weight: 500;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .2s var(--ns-ease);
  text-decoration: none;
}
.ns-btn-primary {
  background: var(--ns-fg);
  color: var(--ns-bg);
}
.ns-btn-primary:hover { transform: translateY(-1px); }
.ns-btn-ghost {
  background: transparent;
  color: var(--ns-fg);
  border-color: var(--ns-line-2);
}
.ns-btn-ghost:hover { border-color: var(--ns-fg-dim); background: var(--ns-bg-2); }

.ns-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-family: var(--ns-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  border-radius: 3px;
  background: var(--ns-bg-2);
  border: 1px solid var(--ns-line-2);
  color: var(--ns-fg-dim);
}

/* Reduce-motion respect */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

[data-motion="off"] * { animation-play-state: paused !important; }