/* ============================================================
   GLOBAL: Base reset, CSS variables, CRT scanlines, glow
   Contrast validation (via WebAIM Contrast Checker):
     #00dd00 on #000000 = 16.9:1  WCAG AAA
     #ffaa00 on #000000 = 11.5:1  WCAG AA
     #00ffff on #000000 = 15.0:1  WCAG AA
     #ff0000 on #000000 = 5.25:1  WCAG AA (normal text)
     #009900 on #000000 = 7.28:1  WCAG AA
     #8a7b62 on #0a0a0e = 4.7:1   WCAG AA (normal text)
   ============================================================ */

:root {
  --color-bg:           #0a0a0e;
  --color-primary:      #e8d4b0;  /* Warm cream -- readable on dark */
  --color-accent-amber: #ffcc00;  /* Bright amber -- links, emphasis */
  --color-accent-cyan:  #cc8800;  /* Warm gold -- labels, secondary data */
  --color-accent-red:   #ff3300;  /* Warning red-orange */
  --color-dim:          #8a7b62;  /* Muted warm grey -- bumped for WCAG AA at small sizes */
  --scanline-opacity:   0.04;     /* Subtle -- Win95 monitors were cleaner */
  --glow-primary:       rgba(255, 200, 100, 0.3);

  /* Win95 beveled panel system (dark variant) */
  --win-face:           #1c1810;  /* Panel/button face */
  --win-light:          #3d3020;  /* Top-left bevel highlight */
  --win-lighter:        #5a4830;  /* Outer highlight */
  --win-dark:           #0c0a06;  /* Bottom-right bevel shadow */
  --win-darker:         #040302;  /* Outer shadow */
  --win-titlebar:       #1a2844;  /* Classic blue title bar */
  --win-titlebar-text:  #ffffff;
  --win-titlebar-inactive: #1c1810;
}

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

html {
  font-size: 16px;
  scroll-behavior: auto;  /* Instantaneous -- no smooth scroll animation */
}

body {
  background-color: var(--color-bg);
  color: var(--color-primary);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* CRT scanline overlay -- pointer-events: none so it doesn't block interaction */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 2px,
    rgba(0, 0, 0, var(--scanline-opacity)) 4px
  );
  background-size: 100% 4px;
}

/* Links -- Win95/geocities: always underlined, blue -> purple visited */
a {
  color: var(--color-accent-amber);
  text-decoration: underline;
  cursor: pointer;
}

a:hover {
  color: #ffe066;
  cursor: pointer;
}

a:active {
  color: var(--color-accent-red);
}

/* Keyboard focus -- visible outline for tab navigation */
:focus-visible {
  outline: 2px solid var(--color-accent-amber);
  outline-offset: 2px;
}

/* Nav links get sunken Win95 focus style */
.nav-link:focus-visible {
  outline: none;
  background: var(--win-titlebar);
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
  color: #fff;
}

/* Buttons get pressed look on focus */
.btn:focus-visible {
  outline: none;
  border-color: var(--win-darker) var(--win-lighter) var(--win-lighter) var(--win-darker);
  box-shadow: inset 1px 1px 0 var(--win-dark), 0 0 0 2px var(--color-accent-amber);
}

/* Disable all animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  /* Also disable scanlines for vestibular disorder users */
  body::before {
    display: none;
  }
}

/* Screen-reader only: visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip-to-content: becomes visible on keyboard focus */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 10000;
  padding: 0.5rem 1rem;
  background: var(--win-titlebar);
  color: #fff;
  font-family: Tahoma, 'Noto Sans Mono', sans-serif;
  font-size: 0.8rem;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}