/* ============================================================
   BuzzShield Cyberpunk — Design Tokens (v1 hero iteration)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700;800&family=Instrument+Serif:ital@1&display=swap');

:root {
  /* Surfaces */
  --bg-0:   #06060A;
  --bg-1:   #0A0A0F;
  --bg-2:   #080810;
  --bg-card:#12121A;
  --border: #1A1A2E;
  --border-strong: #2A2A4E;

  /* Foreground */
  --fg-1: #E0E0E0;
  --fg-2: #888888;
  --fg-3: #555555;
  --fg-warm: #E8E8E8;    /* humanist pull-quote / chef line */

  /* Three accents — final */
  --green:  #00FF88;     /* go / verified / primary stat */
  --cyan:   #00FFFF;     /* interactive / brand / intel */
  --amber:  #FFAA00;     /* adaptive / warning / monitor */

  /* Illustration-only */
  --green-soft: #82FAA9; /* logo halo / under-light, not UI */

  /* Semantic (not accents — reject-state only) */
  --danger: #FF4444;

  /* Glow tokens */
  --glow-green-sm: 0 0 8px  rgba(0,255,136,0.35);
  --glow-green-md: 0 0 15px rgba(0,255,136,0.40);
  --glow-cyan-sm:  0 0 8px  rgba(0,255,255,0.35);
  --glow-cyan-md:  0 0 15px rgba(0,255,255,0.40);
  --glow-cyan-lg:  0 0 25px rgba(0,255,255,0.45);
  --glow-amber-md: 0 0 15px rgba(255,170,0,0.35);
  --text-glow-green: 0 0 10px rgba(0,255,136,0.5);
  --text-glow-cyan:  0 0 10px rgba(0,255,255,0.5);
  --text-glow-amber: 0 0 10px rgba(255,170,0,0.5);

  /* Radii */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-full: 9999px;

  /* Spacing — 4pt grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  /* Type */
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, Menlo, monospace;
  --font-humanist: 'Instrument Serif', Georgia, serif;

  /* Tracking */
  --track-wide: 0.05em;
  --track-wider: 0.12em;
  --track-widest: 0.25em;

  /* Grid bg */
  --hex-size: 40px;
  --hex-dot: rgba(0,255,255,0.03);
}