/* ============================================================
   AKRAM KHATTABI PORTFOLIO — CSS Variables
   ============================================================ */

:root {
  /* Colors */
  --black:       #030308;
  --deep:        #07070f;
  --surface:     #0d0d1a;
  --cyan:        #00e5ff;
  --cyan-dim:    #00b8cc;
  --purple:      #a855f7;
  --purple-dim:  #7c3aed;
  --green:       #00ff9d;
  --white:       #f0f4ff;
  --grey:        #8892aa;

  /* Borders */
  --border:      rgba(0, 229, 255, 0.12);
  --border-hover: rgba(0, 229, 255, 0.35);

  /* Glows */
  --glow:        0 0 30px rgba(0, 229, 255, 0.3);
  --glow-strong: 0 0 60px rgba(0, 229, 255, 0.5);
  --glow-purple: 0 0 30px rgba(168, 85, 247, 0.3);

  /* Typography */
  --font-display: 'Orbitron', monospace;
  --font-body:    'Syne', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Spacing */
  --section-pad: 8rem 4rem;
  --nav-h:       72px;

  /* Transitions */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
}

@media (max-width: 1024px) {
  :root { --section-pad: 6rem 2rem; }
}

@media (max-width: 768px) {
  :root { --section-pad: 5rem 1.5rem; }
}

@media (max-width: 640px) {
  :root { --section-pad: 4rem 1rem; --nav-h: 64px; }
}