/* Neon Nights — Spacing, radius, borders, shadows, motion */
:root{
  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;

  /* Radii — buttons are 8px per the style sheet */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Borders */
  --bw-hair: 1px;
  --bw-neon: 1.5px;
  --bw-strong: 2px;

  /* Neon glow shadow system */
  --glow-cyan: 0 0 8px rgba(69,214,239,0.55), 0 0 22px rgba(69,214,239,0.35);
  --glow-cyan-strong: 0 0 10px rgba(69,214,239,0.9), 0 0 30px rgba(69,214,239,0.55), 0 0 60px rgba(69,214,239,0.3);
  --glow-magenta: 0 0 8px rgba(255,0,153,0.6), 0 0 24px rgba(255,0,153,0.4);
  --glow-magenta-strong: 0 0 12px rgba(255,0,153,0.95), 0 0 34px rgba(255,0,153,0.6), 0 0 66px rgba(255,0,153,0.35);
  --glow-violet: 0 0 10px rgba(122,47,242,0.6), 0 0 28px rgba(122,47,242,0.4);

  /* Elevation (dark UI depth) */
  --shadow-card: 0 10px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-pop: 0 24px 60px rgba(0,0,0,0.7);

  /* Text neon glow */
  --text-glow-cyan: 0 0 6px rgba(69,214,239,0.7), 0 0 18px rgba(69,214,239,0.45);
  --text-glow-magenta: 0 0 6px rgba(255,0,153,0.75), 0 0 20px rgba(255,0,153,0.45);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */

  /* Layout */
  --container: 1160px; /* @kind spacing */
  --grid-line: rgba(69,214,239,0.16); /* @kind color */
}