/* ═══════════════════════════════════════════════════════════════
   NEXUS.LOG — CYBERPUNK DESIGN TOKEN SYSTEM
   Deep Black · Neon Green · Magenta · Cyan
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

:root {
  /* ── CORE COLOURS ── */
  --void:         #0a0a0f;
  --void-deep:    #050508;
  --surface:      #0f0f1a;
  --surface-mid:  #12121f;
  --surface-high: #1a1a2e;
  --surface-rim:  #1e1e30;
  --panel:        #111120;
  --panel-border: rgba(0,255,136,0.08);

  /* ── NEON ACCENTS ── */
  --neon-green:    #00ff88;
  --neon-green-dim:#00cc66;
  --neon-green-dark:#003322;
  --neon-green-glow: rgba(0,255,136,0.20);
  --neon-green-ghost: rgba(0,255,136,0.06);

  --magenta:       #ff00ff;
  --magenta-dim:   #cc00cc;
  --magenta-dark:  #330033;
  --magenta-glow:  rgba(255,0,255,0.20);
  --magenta-ghost: rgba(255,0,255,0.06);

  --cyan:          #00d4ff;
  --cyan-dim:      #00aacc;
  --cyan-dark:     #003344;
  --cyan-glow:     rgba(0,212,255,0.20);
  --cyan-ghost:    rgba(0,212,255,0.06);

  --amber:         #ffaa00;
  --amber-glow:    rgba(255,170,0,0.18);

  --red-alert:     #ff2244;
  --red-glow:      rgba(255,34,68,0.22);

  /* ── TEXT ── */
  --text:          #e0e0e0;
  --text-bright:   #f0f0f0;
  --text-dim:      rgba(224,224,224,0.60);
  --text-muted:    rgba(224,224,224,0.38);
  --text-ghost:    rgba(224,224,224,0.15);
  --text-code:     #00ff88;

  /* ── TYPOGRAPHY ── */
  --font-display:  'Orbitron', 'Courier New', monospace;
  --font-body:     'JetBrains Mono', 'Courier New', monospace;

  /* Font Sizes */
  --fs-2xs:  0.60rem;
  --fs-xs:   0.72rem;
  --fs-sm:   0.85rem;
  --fs-base: 0.95rem;
  --fs-md:   1.05rem;
  --fs-lg:   1.25rem;
  --fs-xl:   1.55rem;
  --fs-2xl:  2.00rem;
  --fs-3xl:  2.80rem;
  --fs-4xl:  3.80rem;
  --fs-5xl:  5.20rem;
  --fs-6xl:  7.00rem;

  /* Line heights */
  --lh-tight:  1.1;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.85;
  --lh-code:   1.75;

  /* Letter spacing */
  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-wider:   0.15em;
  --ls-widest:  0.28em;
  --ls-display: 0.12em;

  /* ── SPACING ── */
  --sp-1:   0.25rem;
  --sp-2:   0.50rem;
  --sp-3:   0.75rem;
  --sp-4:   1.00rem;
  --sp-5:   1.25rem;
  --sp-6:   1.50rem;
  --sp-8:   2.00rem;
  --sp-10:  2.50rem;
  --sp-12:  3.00rem;
  --sp-16:  4.00rem;
  --sp-20:  5.00rem;
  --sp-24:  6.00rem;
  --sp-32:  8.00rem;
  --sp-40: 10.00rem;

  /* ── LAYOUT ── */
  --max-w:    1280px;
  --max-w-md:  900px;
  --max-w-sm:  640px;
  --gutter:    clamp(1rem, 4vw, 2.5rem);

  /* ── BORDERS ── */
  --b-green:    1px solid var(--neon-green-dim);
  --b-green-lo: 1px solid rgba(0,255,136,0.20);
  --b-magenta:  1px solid var(--magenta-dim);
  --b-cyan:     1px solid var(--cyan-dim);
  --b-panel:    1px solid rgba(0,255,136,0.10);
  --b-void:     1px solid rgba(224,224,224,0.06);

  /* ── GLOWS / SHADOWS ── */
  --glow-green:  0 0 20px var(--neon-green-glow), 0 0 60px rgba(0,255,136,0.08);
  --glow-magenta:0 0 20px var(--magenta-glow), 0 0 60px rgba(255,0,255,0.06);
  --glow-cyan:   0 0 20px var(--cyan-glow), 0 0 60px rgba(0,212,255,0.06);
  --glow-sm-green: 0 0 10px var(--neon-green-glow);
  --glow-sm-magenta: 0 0 10px var(--magenta-glow);
  --glow-sm-cyan: 0 0 10px var(--cyan-glow);
  --shadow-panel: 0 8px 32px rgba(0,0,0,0.60), 0 2px 8px rgba(0,0,0,0.40);
  --shadow-deep:  0 20px 80px rgba(0,0,0,0.80);

  /* ── MOTION ── */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.5, 0, 0.75, 0);
  --dur-fast:  0.15s;
  --dur-mid:   0.30s;
  --dur-slow:  0.55s;

  /* ── Z-INDEX ── */
  --z-below:  -1;
  --z-base:    1;
  --z-up:      10;
  --z-float:   50;
  --z-modal:   200;
  --z-nav:     300;
  --z-overlay: 9999;
}