/* ===== RESET ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { min-height: 100vh; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ===== DESIGN TOKENS — The Matrix: Digital Dystopia ===== */
:root {
  --bg:             #030805;
  --surface:        #060e07;
  --surface-2:      #091508;
  --surface-offset: #0c1d0b;

  --text:           #b8d8b0;
  --text-muted:     #6a9a6a;
  --text-faint:     #2e5a2e;

  --accent:         #00ff41;
  --accent-dim:     #00c432;
  --accent-glow:    rgba(0, 255, 65, 0.18);
  --accent-glow-lg: rgba(0, 255, 65, 0.08);

  --divider:        rgba(0, 255, 65, 0.07);
  --border:         rgba(0, 255, 65, 0.14);
  --border-bright:  rgba(0, 255, 65, 0.35);

  /* Typography Scale */
  --text-xs:    clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --text-sm:    clamp(0.8125rem, 0.77rem + 0.2vw, 0.875rem);
  --text-base:  clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);
  --text-lg:    clamp(1.0625rem, 0.98rem + 0.35vw, 1.125rem);
  --text-xl:    clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem);
  --text-2xl:   clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl:   clamp(2rem, 1.5rem + 2vw, 3rem);
  --text-hero:  clamp(2.5rem, 1.5rem + 4vw, 5.5rem);

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Layout */
  --max-w: 1200px;
  --max-w-prose: 72ch;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}

/* ===== BASE STYLES ===== */
body {
  font-family: 'Exo 2', 'Segoe UI', sans-serif;
  font-size: var(--text-base);
  color: var(--text);
  background-color: var(--bg);
  cursor: default;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              text-shadow var(--duration-fast) var(--ease-out);
}
a:hover {
  color: #fff;
  text-shadow: 0 0 8px var(--accent-glow);
}
a:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Rajdhani', 'Segoe UI', sans-serif;
  line-height: 1.1;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
}

p { max-width: var(--max-w-prose); }

img { height: auto; object-fit: cover; }

::selection {
  background: rgba(0, 255, 65, 0.25);
  color: #fff;
}

/* Green scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 65, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--accent);
  color: var(--bg);
  padding: var(--space-2) var(--space-4);
  z-index: 1000;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-family: 'Share Tech Mono', monospace;
}
.skip-link:focus { top: var(--space-4); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}