/* ═══════════════════════════════════════════════
   m3kko — Design Tokens
   SIGINT / Infrastructure Aesthetic
   ═══════════════════════════════════════════════ */

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

:root {
  /* ── Backgrounds ── */
  --bg-primary:    #0A0A0A;
  --bg-secondary:  #111111;
  --bg-elevated:   #1A1A1A;

  /* ── Borders ── */
  --border:        #1E1E1E;
  --border-accent: #2A2A2A;

  /* ── Text ── */
  --text-primary:   #E8E8E8;
  --text-secondary: #888888;
  --text-muted:     #555555;

  /* ── Accent — Green (slightly desaturated) ── */
  --accent:        #00E87A;
  --accent-dim:    #00BB62;
  --accent-glow:   rgba(0, 232, 122, 0.12);
  --accent-subtle: rgba(0, 232, 122, 0.05);

  /* ── Accent — Cyan (secondary) ── */
  --accent-cyan:      #00D4FF;
  --accent-cyan-glow: rgba(0, 212, 255, 0.15);

  /* ── Typography ── */
  --font-mono: 'JetBrains Mono', monospace;
  --font-display: 'Share Tech Mono', 'Courier New', monospace;

  --text-hero:  80px;
  --text-h1:    48px;
  --text-h2:    24px;
  --text-body:  14px;
  --text-label: 11px;
  --text-micro: 9px;

  /* ── Spacing ── */
  --grid-max:    1200px;
  --grid-gap:    24px;
  --grid-row:    48px;
  --margin-desk: 48px;
  --margin-mob:  24px;

  /* ── Effects ── */
  --glow-sm: 0 0 15px rgba(0, 255, 136, 0.15);
  --glow-md: 0 0 30px rgba(0, 255, 136, 0.2);
  --glow-lg: 0 0 60px rgba(0, 255, 136, 0.12);
  --glow-text: 0 0 20px rgba(0, 255, 136, 0.3);

  /* ── Glass / Cards ── */
  --glass-bg:           rgba(14, 14, 14, 0.6);
  --glass-bg-hover:     rgba(14, 14, 14, 0.8);
  --glass-border:       rgba(255, 255, 255, 0.05);
  --glass-border-hover: rgba(0, 255, 136, 0.18);
  --glass-blur:         16px;
  --card-radius:        2px;

  /* ── Halo ── */
  --halo-idle:  0 0 0 1px rgba(255, 255, 255, 0.04);
  --halo-hover: 0 0 0 1px rgba(0, 255, 136, 0.12), 0 0 30px rgba(0, 255, 136, 0.06), 0 0 60px rgba(0, 255, 136, 0.03);

  /* ── Bento ── */
  --bento-gap:     16px;
  --bento-padding: 28px;
}