/* ═══════════════════════════════════════════
   variables.css — Design Tokens
   RainByte Studios
═══════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --black:        #070709;
  --void:         #0a0a0d;
  --surface:      #0f1117;
  --panel:        #141720;
  --border:       rgba(160, 185, 220, 0.11);
  --border-hover: rgba(74, 144, 217, 0.35);

  --silver:       #c8d8e8;
  --silver-dim:   #8898a8;
  --ice:          #e8f2ff;

  --blue-core:    #4a90d9;
  --blue-glow:    #6db4ff;
  --blue-deep:    #1a3a6a;
  --blue-dark:    #0d2040;
  --accent:       #7ecfff;

  --vp-gold:      #f5c842;
  --vp-rose:      #ff6b9d;
  --vp-violet:    #b06aff;
  --vp-teal:      #42d9c8;

  --coconut:      #f5a623;
  --coconut-dim:  #c87d10;

  --text:         #d0dde8;
  --text-dim:     #6a7a8a;

  /* ── Typography ── */
  --font-display: 'Orbitron', monospace;
  --font-body:    'Exo 2', sans-serif;

  /* ── Layout ── */
  --nav-h:        72px;
  --section-pad:  clamp(80px, 10vw, 140px);
  --page-pad:     clamp(24px, 5vw, 80px);
  --max-w:        1440px;
  --radius:       3px;

  /* ── Motion ── */
  --ease-smooth:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:     0.25s;
  --dur-base:     0.45s;
  --dur-slow:     0.85s;
}