/* ==========================================================
   CYBERPUNK PORTFOLIO
   Design System
========================================================== */

:root {
  /* Background */
  --bg-primary: #0A0A0F;
  --bg-secondary: #13121A;
  --bg-card: #181722;
  --bg-hover: #1E1D2A;

  /* Colors */
  --primary: #4B1387;
  --primary-light: #B026FF;
  --system: #e100ff;
  --warning: #FF2E63;

  --text: #E8E6F0;
  --text-secondary: #8A87A0;

  --border: rgba(255, 255, 255, .08);

  /* Glow */
  --glow-purple: 0 0 5px #4B1387, 0 0 10px #4B1387, 0 0 20px #B026FF;
  --glow-cyan: 0 0 5px #00F0FF, 0 0 12px #00F0FF;
  --glow-red: 0 0 5px #FF2E63, 0 0 15px #FF2E63;

  /* Radius */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-card: 0 8px 30px rgba(0, 0, 0, .35);

  /* Fonts */
  --font-heading: "Chakra Petch", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  /* Layout */
  --container: 1240px;

  --space-xs: .5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  /* Animation */
  --transition: .25s ease;
}