/* ============================================================
   FUTURISTIC UI (NEXUS) — Design Tokens
   Framework-agnostic CSS custom properties.
   Single source of truth for color, type, spacing, effects.
   Dark sci-fi HUD aesthetic: deep navy, glowing cyan,
   concentric rings, scanlines, techno / monospace type.

   Ported from ../shared/tokens.css (raw --hud-* palette),
   then extended with a semantic layer so the class vocabulary
   ports cleanly across HTML / React / Vue / Next / WordPress.
   ============================================================ */

:root {
  /* ---- Raw HUD palette (mirrors ../shared/tokens.css) ---- */
  --hud-cyan: #00d4ff;
  --hud-cyan-dark: #0099cc;
  --hud-cyan-glow: #00e5ff;
  --hud-blue: #1a2332;
  --hud-navy: #0d1520;
  --hud-accent: #ff6b35;
  --hud-warning: #ffcc00;
  --hud-success: #00ff88;

  /* ---- Surfaces (deep navy → black HUD darks) ---- */
  --nd-black: #0a0f16;      /* page background, deepest */
  --nd-charcoal: #0d1520;   /* hud-navy — alt sections */
  --nd-slate: #131d2b;      /* panels / cards */
  --nd-panel: rgba(19, 29, 43, 0.9);

  /* ---- Geometric line work (glowing cyan hairlines) ---- */
  --nd-line: rgba(0, 212, 255, 0.35);
  --nd-line-light: rgba(0, 212, 255, 0.55);
  --nd-line-faint: rgba(0, 212, 255, 0.14);

  /* ---- Accent spectrum (signature = cyan, remaps kept for vocab) ---- */
  --prism-cyan: #00d4ff;
  --prism-teal: #00ff88;    /* hud-success — alerts/ticks */
  --prism-pink: #ff6b35;    /* hud-accent */
  --prism-coral: #ff8a80;
  --prism-orange: #ff6b35;  /* hud-accent */
  --prism-gold: #ffcc00;    /* hud-warning — stars / prices / flags */

  /* ---- Refined neutrals (cyan-tinted text ramp) ---- */
  --neutral-50: #f0fbff;
  --neutral-100: #d7f3ff;   /* headings — bright */
  --neutral-200: #a6d8ea;   /* body copy */
  --neutral-300: #7cb4cc;
  --neutral-400: #5a8ba3;   /* muted / eyebrow */
  --neutral-500: #46708a;
  --neutral-600: #33556b;
  --neutral-700: #223c4d;
  --neutral-800: #16232f;
  --neutral-900: #0d1720;

  /* ---- Signature gradients ---- */
  --prism-gradient: linear-gradient(135deg, #00e5ff 0%, #00d4ff 45%, #0099cc 100%);
  --prism-gradient-soft: linear-gradient(135deg, rgba(0,229,255,.9) 0%, rgba(0,212,255,.85) 50%, rgba(0,153,204,.85) 100%);
  --deco-line: linear-gradient(90deg, transparent, rgba(0,212,255,.5), transparent);
  --glow-radial-prism:
    radial-gradient(ellipse at 50% 45%, rgba(0,212,255,.14) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 45%, rgba(0,153,204,.08) 0%, transparent 70%);

  /* ---- Neon glow shadows (HUD, no soft drop shadows) ---- */
  --glow-sm: 0 0 20px rgba(0,212,255,.18);
  --glow-md: 0 0 36px rgba(0,212,255,.30);
  --glow-lg: 0 0 60px rgba(0,212,255,.35);
  --glow-pink: 0 0 36px rgba(255,107,53,.25);
  --glow-prism: 0 0 30px rgba(0,212,255,.22), inset 0 0 30px rgba(0,212,255,.06);
  --glow-cyan: 0 0 10px rgba(0,212,255,.5), 0 0 20px rgba(0,212,255,.3);
  --glow-cyan-lg: 0 0 20px rgba(0,212,255,.7), 0 0 40px rgba(0,212,255,.4);
  --glow-text: 0 0 10px rgba(0,212,255,.8), 0 0 22px rgba(0,212,255,.45);

  /* ---- Typography ---- */
  --font-display: "Orbitron", "Rajdhani", system-ui, sans-serif;
  --font-sans: "Rajdhani", system-ui, -apple-system, sans-serif;
  --font-mono: "Share Tech Mono", ui-monospace, "JetBrains Mono", monospace;

  /* ---- Layout ---- */
  --container: 72rem;      /* 1152px */
  --container-narrow: 48rem;
  --radius: 0;             /* HUD = hard, machined corners */
  --hairline: 1px;

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 500ms;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* ---- HUD grid background pattern (cyan lattice) ---- */
  --deco-pattern:
    linear-gradient(rgba(0,212,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.06) 1px, transparent 1px);
  --deco-pattern-size: 48px 48px;

  /* ---- Scanline overlay ---- */
  --scanlines: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,212,255,.025) 2px, rgba(0,212,255,.025) 4px);
}