/* variables.css — Design tokens */
:root {
  /* Colors */
  --bg:          #080a0f;
  --bg2:         #0d1017;
  --surface:     #111520;
  --surface2:    #161c2a;
  --border:      rgba(80, 160, 255, 0.12);

  --cyan:        #4dc8f0;
  --cyan2:       #7adcff;
  --cyan-glow:   rgba(77, 200, 240, 0.3);

  --green:       #39ff85;
  --green-glow:  rgba(57, 255, 133, 0.25);

  --purple:      #c084fc;

  --white:       #f0f4ff;
  --muted:       #5a6a8a;
  --text:        #c8d8f0;

  /* Typography */
  --font-display: 'Exo 2', sans-serif;
  --font-ui:      'Rajdhani', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing */
  --section-pad:  120px;
  --inner-pad:    48px;

  /* Radii */
  --radius-sm:    3px;
  --radius-md:    8px;
  --radius-lg:    16px;
}

@media (max-width: 768px) {
  :root {
    --section-pad: 72px;
    --inner-pad:   20px;
  }
}

@media (max-width: 480px) {
  :root {
    --section-pad: 56px;
    --inner-pad:   16px;
  }
}