/* === Base / Global Styles === */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

body {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  position: relative;
}

/* Scanline texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  opacity: 0.4;
}

/* Selection */
::selection {
  background: var(--accent-green);
  color: var(--bg-primary);
}

::-moz-selection {
  background: var(--accent-green);
  color: var(--bg-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--text-muted);
  border: 1px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-green);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }
}

/* Section spacing */
section {
  padding: var(--space-4xl) 0;
  position: relative;
  z-index: 1;
}

/* Link base */
a {
  transition: color var(--ease-default);
}

a:hover {
  color: var(--accent-green);
}

/* Screen reader only / visually hidden (for SEO elements) */
.sr-only,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* Prompt character */
.prompt {
  color: var(--accent-green);
  user-select: none;
}

/* Accent text colors */
.text-green  { color: var(--accent-green); }
.text-yellow { color: var(--accent-yellow); }
.text-red    { color: var(--accent-red); }
.text-blue   { color: var(--accent-blue); }
.text-muted  { color: var(--text-muted); }