/* =========================================================================
   ARACHNID — design tokens
   Spider operates a spaceship HUD.
   Deep space base · amber-eye glow · chromatic per-tool tints.
   ========================================================================= */

:root {
  /* ---------- DEEP SPACE BASE ---------- */
  --arn-void:        oklch(0.12 0.012 285);   /* matte near-black, faint violet */
  --arn-void-2:      oklch(0.16 0.018 285);   /* panel base */
  --arn-void-3:      oklch(0.20 0.022 285);   /* raised panel */
  --arn-hull:        oklch(0.26 0.020 270);   /* chrome rail */
  --arn-hull-edge:   oklch(0.34 0.024 268);   /* hairline edge */
  --arn-glass:       oklch(0.22 0.020 280 / 0.62);
  --arn-glass-hi:    oklch(0.32 0.022 275 / 0.40);

  /* ---------- INK / READOUT ---------- */
  --arn-ink:         oklch(0.94 0.008 95);    /* warm pearl */
  --arn-ink-2:       oklch(0.78 0.010 85);    /* secondary */
  --arn-ink-3:       oklch(0.58 0.012 78);    /* tertiary */
  --arn-ink-4:       oklch(0.42 0.014 75);    /* dim */
  --arn-silk:        oklch(0.86 0.012 80);    /* web thread */
  --arn-silk-dim:    oklch(0.46 0.012 80 / 0.55);

  /* ---------- AMBER EYE (default) ---------- */
  --arn-amber:       oklch(0.78 0.165 70);
  --arn-amber-hot:   oklch(0.88 0.180 78);
  --arn-amber-dim:   oklch(0.46 0.110 68);
  --arn-amber-bloom: oklch(0.78 0.18 70 / 0.32);

  /* ---------- CHROMATIC EYE HUES (one per tool, when firing) ----------
     All ~equal lightness/chroma; only hue varies. */
  --eye-1: oklch(0.80 0.170  60);  /* navigate   — amber-orange */
  --eye-2: oklch(0.82 0.150  95);  /* extract_text — straw */
  --eye-3: oklch(0.82 0.160 145);  /* extract_links — chartreuse */
  --eye-4: oklch(0.82 0.155 195);  /* screenshot — cyan */
  --eye-5: oklch(0.78 0.165 240);  /* click_text — azure */
  --eye-6: oklch(0.76 0.170 295);  /* fill_field — violet */
  --eye-7: oklch(0.78 0.175 335);  /* get_url — magenta */
  --eye-8: oklch(0.80 0.170  25);  /* mode_toggle — vermilion */

  /* ---------- TRUST SIGNALS ---------- */
  --arn-trust-ok:    oklch(0.82 0.160 145);   /* allowlist hit, HSTS ok */
  --arn-trust-warn:  oklch(0.82 0.170  72);   /* unknown */
  --arn-trust-bad:   oklch(0.72 0.205  25);   /* blocklist hit */
  --arn-acid:        oklch(0.86 0.180 130);   /* Acid Bath active — chartreuse-phosphor */
  --arn-quarantine:  oklch(0.78 0.185 320);   /* magenta envelope */

  /* ---------- TYPE ---------- */
  --arn-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --arn-display:"Saira Condensed", "Barlow Condensed", "Oswald", system-ui, sans-serif;

  /* ---------- RADII ---------- */
  --arn-r-0: 0px;
  --arn-r-1: 2px;
  --arn-r-2: 4px;
  --arn-r-3: 8px;
  --arn-r-4: 14px;

  /* ---------- HAIRLINES ---------- */
  --arn-hair: 1px solid oklch(0.34 0.024 268 / 0.65);
  --arn-hair-dim: 1px solid oklch(0.28 0.020 270 / 0.55);
}

/* utility */
.arn-mono { font-family: var(--arn-mono); font-feature-settings: "ss01","cv01","cv02"; }
.arn-disp { font-family: var(--arn-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.arn-tnum { font-variant-numeric: tabular-nums; }

/* glass panel */
.arn-glass {
  background:
    linear-gradient(180deg, oklch(0.30 0.022 275 / 0.55) 0%, oklch(0.18 0.018 280 / 0.65) 100%);
  border: var(--arn-hair);
  box-shadow:
    inset 0 1px 0 oklch(0.48 0.024 275 / 0.35),
    inset 0 0 0 1px oklch(0.10 0.014 285 / 0.5),
    0 8px 24px -8px rgb(0 0 0 / 0.6);
  backdrop-filter: blur(8px) saturate(1.1);
}

/* hairline grid texture for HUD bg */
.arn-grid-bg {
  background-image:
    linear-gradient(oklch(0.30 0.020 280 / 0.20) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.30 0.020 280 / 0.20) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 30%, oklch(0.22 0.040 280 / 0.5) 0%, oklch(0.10 0.012 285) 65%);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  background-position: -1px -1px, -1px -1px, 0 0;
}

/* scanline overlay (very subtle) */
.arn-scanlines::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    oklch(1 0 0 / 0.012) 2px 3px
  );
  mix-blend-mode: screen;
}

/* eye blink keyframes — sequential scan when idle */
@keyframes arn-eye-scan {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.85; }
}
@keyframes arn-eye-fire {
  0%, 100% { filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor); }
  50%      { filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 22px currentColor); }
}
@keyframes arn-thread-pulse {
  0%   { stroke-dashoffset: 0;   opacity: 0.85; }
  100% { stroke-dashoffset: -32; opacity: 0.45; }
}
@keyframes arn-lock {
  0%   { transform: scale(1.6); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1.0); opacity: 0.9; }
}