/* NERVE design tokens — Animal Studio × Linear density
 * Light is canon; dark mirrors it for night-shift controllers.
 */

:root, [data-nerve-theme="light"] {
  /* Brand — Lava is the only red on screen */
  --lava: #EE3C26;
  --lava-ink: #C8240F;
  --ember: #FF6A4D;
  --ash: #FFE9E3;

  /* Warm neutrals — paper, not gray */
  --ink-900: #0D0D0D;
  --ink-800: #1A1A1A;
  --ink-700: #2E2E2E;
  --ink-500: #6B6B6B;
  --ink-400: #9A9A9A;
  --ink-300: #C8C8C8;
  --ink-200: #E5E5E5;
  --ink-100: #F2F1EE;
  --ink-50:  #FAF9F6;
  --paper:   #FFFFFF;
  --canvas:  #F5F3EE;

  /* Status — semantic only */
  --ok:   #1F8F4E;
  --warn: #E0A100;
  --err:  #D7352A;
  --info: #0C6CC1;

  /* Severity tints — backgrounds for rows */
  --sev-hi-bg:  #FBE0DD;
  --sev-med-bg: #FBF0CE;
  --sev-low-bg: #DFEDF9;
  --sev-noted-bg: #F2F1EE;

  /* Hairlines + rules */
  --hair: #EBEAE5;
  --line: #D7D5CE;
  --rule: #0D0D0D;

  /* Elevation */
  --sh-1: 0 1px 0 rgba(13,13,13,.06), 0 1px 2px rgba(13,13,13,.05);
  --sh-2: 0 4px 12px rgba(13,13,13,.08);
  --sh-3: 0 12px 32px rgba(13,13,13,.12);
  --ring: 0 0 0 3px rgba(238,60,38,.28);

  /* Surface tokens */
  --bg:       var(--canvas);
  --bg-alt:   var(--ink-50);
  --surface:  var(--paper);
  --surface-2: var(--ink-100);
  --rail-bg:  var(--ink-900);
  --rail-ink: #F2F1EE;
  --rail-mute: #6B6B6B;
  --text:     var(--ink-900);
  --text-2:   var(--ink-700);
  --text-3:   var(--ink-500);
  --text-4:   var(--ink-400);
  --border:   var(--hair);
  --border-2: var(--line);
}

[data-nerve-theme="dark"] {
  --canvas:  #0B0C10;
  --paper:   #161821;
  --ink-50:  #1B1E29;
  --ink-100: #20232E;
  --ink-200: #2C3040;
  --ink-300: #3D4254;
  --ink-400: #5A607A;
  --ink-500: #8A90A6;
  --ink-700: #C9CCD8;
  --ink-800: #E4E6EE;
  --ink-900: #F4F5F8;

  --hair: #232634;
  --line: #2E3243;
  --rule: #F4F5F8;

  --sev-hi-bg:  #2A1818;
  --sev-med-bg: #2A2410;
  --sev-low-bg: #142235;
  --sev-noted-bg: #1B1E29;

  --bg:      #0B0C10;
  --bg-alt:  #0F1117;
  --surface: #161821;
  --surface-2: #1B1E29;
  --rail-bg: #07080C;
  --rail-ink: #F4F5F8;
  --rail-mute: #5A607A;
  --text:   #F4F5F8;
  --text-2: #C9CCD8;
  --text-3: #8A90A6;
  --text-4: #5A607A;
  --border: #232634;
  --border-2: #2E3243;

  --sh-1: 0 1px 0 rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 12px rgba(0,0,0,.45);
  --sh-3: 0 12px 32px rgba(0,0,0,.55);

  --ash: #2A1816;
}

/* Fonts — load from gstatic with Inter Tight, Archivo, JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800;900&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

.nerve {
  font-family: 'Inter Tight', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.005em;
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "ss01" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.nerve, .nerve * { box-sizing: border-box; }

.nerve .display { font-family: 'Archivo', system-ui, sans-serif; font-weight: 900; letter-spacing: -0.03em; line-height: 0.95; }
.nerve .heading { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.nerve .mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: 'tnum' 1, 'zero' 1; letter-spacing: -0.01em; }
.nerve .caps    { font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-3); }
.nerve .micro   { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

/* Live-data pulse dot */
@keyframes nerve-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.88); }
}
.nerve .pulse-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--lava);
  animation: nerve-pulse 1.6s cubic-bezier(.4,0,.6,1) infinite;
  box-shadow: 0 0 0 0 var(--lava);
}
.nerve .pulse-dot--ok { background: var(--ok); }
.nerve .pulse-dot--warn { background: var(--warn); }

/* Severity dots */
.nerve .sev-dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; flex: 0 0 8px; }
.nerve .sev-dot--crit { background: var(--lava); box-shadow: 0 0 0 3px rgba(238,60,38,.18); }
.nerve .sev-dot--hi   { background: #F08A3C; box-shadow: 0 0 0 3px rgba(240,138,60,.18); }
.nerve .sev-dot--med  { background: var(--warn); }
.nerve .sev-dot--low  { background: var(--info); }
.nerve .sev-dot--ok   { background: var(--ok); }
.nerve .sev-dot--noted{ background: var(--ink-400); }

/* Squared 2px corners by default */
.nerve .card { background: var(--surface); border: 1px solid var(--border); border-radius: 2px; }
.nerve .card-strong { background: var(--surface); border: 1px solid var(--border-2); border-radius: 2px; }
.nerve .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }

/* Live ticker scan-line */
@keyframes nerve-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.nerve .scan-line {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.nerve .scan-line::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(238,60,38,.05) 45%, rgba(238,60,38,.18) 50%, rgba(238,60,38,.05) 55%, transparent 100%);
  animation: nerve-scan 6s linear infinite;
}

/* Sparkline draw-in */
@keyframes nerve-draw {
  from { stroke-dashoffset: 600; }
  to   { stroke-dashoffset: 0; }
}
.nerve .spark-path { stroke-dasharray: 600; animation: nerve-draw 1.6s cubic-bezier(.2,.7,.2,1) forwards; }

/* Heat overlay shimmer */
@keyframes nerve-shimmer {
  0%, 100% { opacity: .55; }
  50%      { opacity: .9; }
}
.nerve .heat-ping { animation: nerve-shimmer 2.4s ease-in-out infinite; }

/* Bar grow */
@keyframes nerve-bar {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
.nerve .bar { transform-origin: bottom; animation: nerve-bar .9s cubic-bezier(.2,.7,.2,1) forwards; }

/* Crosshair scanning border for hot cards */
@keyframes nerve-cross {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(2px,0); }
}

/* Focus ring */
.nerve :focus-visible { outline: none; box-shadow: var(--ring); }

/* Buttons */
.nerve .btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px;
  font: 600 13px/1 'Inter Tight', sans-serif; letter-spacing: -0.005em;
  background: var(--surface); color: var(--text); border: 1px solid var(--border-2);
  border-radius: 2px; cursor: pointer; transition: all 120ms cubic-bezier(.2,.7,.2,1);
  position: relative; overflow: hidden;
}
.nerve .btn:hover { background: var(--surface-2); }
.nerve .btn--primary { background: var(--lava); color: #fff; border-color: var(--lava); }
.nerve .btn--primary:hover { background: var(--lava-ink); border-color: var(--lava-ink); }
.nerve .btn--ghost { background: transparent; border-color: transparent; }
.nerve .btn--ghost:hover { background: var(--surface-2); }
.nerve .btn--dark { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.nerve .btn--dark:hover { background: var(--ink-700); }
.nerve .btn--sm { padding: 5px 9px; font-size: 11.5px; }
.nerve .btn--xs { padding: 3px 7px; font-size: 11px; }
.nerve .btn .kbd { font-family: 'JetBrains Mono', monospace; font-size: 11px; opacity: .7; }

/* Animated press effect on primary CTA */
@keyframes nerve-cta {
  0% { transform: translateX(-120%) skewX(-12deg); }
  100% { transform: translateX(220%) skewX(-12deg); }
}
.nerve .btn--primary::after {
  content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  animation: nerve-cta 3.4s ease-in-out infinite;
}

/* Kbd chip */
.nerve .kbd-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 3px;
  background: var(--surface-2); border: 1px solid var(--border);
  font: 600 10.5px/1 'JetBrains Mono', monospace; color: var(--text-2);
}

/* Tag */
.nerve .tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px;
  border: 1px solid var(--border-2); border-radius: 2px; font: 600 10.5px/1.6 'JetBrains Mono', monospace;
  letter-spacing: 0; text-transform: uppercase; color: var(--text-2); background: var(--surface);
}
.nerve .tag--crit { background: var(--lava); border-color: var(--lava); color: #fff; }
.nerve .tag--warn { background: var(--warn); border-color: var(--warn); color: #fff; }
.nerve .tag--ok   { background: var(--ok); border-color: var(--ok); color: #fff; }
.nerve .tag--info { background: var(--info); border-color: var(--info); color: #fff; }
.nerve .tag--ghost { background: transparent; }

/* Grid overlays (futurist) */
.nerve .gridlines {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  opacity: .45;
}

/* Subtle dotted grid for hero panels */
.nerve .dotgrid {
  background-image: radial-gradient(circle at 1px 1px, var(--border-2) 1px, transparent 0);
  background-size: 16px 16px;
}

/* Numeric reel */
.nerve .num { font-family: 'Archivo', sans-serif; font-weight: 900; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* Sparkbars sizing */
.nerve .sparkbars { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.nerve .sparkbars > i { display: block; width: 4px; background: var(--ink-300); border-radius: 0; }
.nerve .sparkbars > i.hot { background: var(--lava); }
.nerve .sparkbars > i.mid { background: var(--ink-700); }

/* Density */
[data-nerve-density="compact"] { font-size: 13px; }
[data-nerve-density="compact"] .panel,
[data-nerve-density="compact"] .card { line-height: 1.35; }

/* Scrollbar tidy */
.nerve ::-webkit-scrollbar { width: 8px; height: 8px; }
.nerve ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 999px; }
.nerve ::-webkit-scrollbar-track { background: transparent; }

/* Decorative bracket corner */
.nerve .bracket { position: relative; }
.nerve .bracket::before,
.nerve .bracket::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-color: var(--lava); border-style: solid; border-width: 0;
}
.nerve .bracket::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.nerve .bracket::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }