/* ═══════════════════════════════════════════
   reset.css — base reset & global tokens
═══════════════════════════════════════════ */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colors */
  --clr-bg:        #060d1e;
  --clr-pink:      #ff1f6e;
  --clr-cyan:      #00ffff;
  --clr-magenta:   #ff00ff;
  --clr-green:     #00dd77;
  --clr-blue:      #4488ff;
  --clr-amber:     #ffcc00;
  --clr-white:     #ffffff;

  /* Glass surface */
  --glass-bg:      rgba(255, 255, 255, 0.07);
  --glass-border:  rgba(255, 255, 255, 0.13);
  --glass-hover:   rgba(255, 255, 255, 0.16);
  --glass-blur:    blur(6px);

  /* Typography */
  --font-mono:     'Share Tech Mono', monospace;
  --font-display:  'Orbitron', sans-serif;

  /* Z-layers */
  --z-bg:          0;
  --z-nebula:      1;
  --z-stars:       2;
  --z-character:   3;
  --z-ui:          5;
  --z-terminal:    10;
  --z-toast:       50;
  --z-video:       100;
  --z-preloader:   300;

  /* Easing */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--clr-bg);
  font-family: var(--font-mono);
  color: var(--clr-white);
}

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

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}