@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@400;600;800;900&display=swap');

:root {
  /* Color Palette (HSL) */
  --bg-primary: hsl(230, 30%, 5%);     /* Deep cyber space background */
  --bg-secondary: hsl(230, 25%, 10%);  /* Dark electric slate */
  --bg-tertiary: hsl(230, 20%, 15%);   /* Cyber card borders / hover states */
  
  --color-text-primary: hsl(210, 40%, 95%);
  --color-text-secondary: hsl(215, 25%, 65%);
  --color-text-muted: hsl(215, 15%, 45%);

  /* Neon Cyber Accents */
  --accent-cyan: hsl(180, 100%, 50%);       /* Electric Cyan */
  --accent-cyan-rgb: 0, 240, 255;
  --accent-pink: hsl(330, 100%, 50%);       /* Neon Pink */
  --accent-pink-rgb: 255, 0, 127;
  
  /* Status Colors */
  --color-success: hsl(140, 80%, 45%);
  --color-warning: hsl(40, 90%, 55%);
  --color-danger: hsl(0, 85%, 55%);

  /* Borders, Blur & Glowing Shadows */
  --border-glow: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
  --border-glow-pink: 1px solid rgba(var(--accent-pink-rgb), 0.2);
  
  --shadow-glow-cyan: 0 0 15px rgba(var(--accent-cyan-rgb), 0.3);
  --shadow-glow-pink: 0 0 15px rgba(var(--accent-pink-rgb), 0.3);
  
  --glass-bg: rgba(18, 20, 32, 0.75);
  --glass-blur: blur(12px);

  /* Typography */
  --font-display: 'Orbitron', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Motion & Animations */
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;
}

/* Base resets and defaults */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-fast);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}