/* ── 90s OS/Terminal Base ──────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=VT323&family=Space+Mono:wght@400;700&display=swap');

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

:root {
  /* Win95 system palette */
  --win-bg: #008080;
  --win-gray: #c0c0c0;
  --win-dark: #808080;
  --win-light: #ffffff;
  --win-shadow: #404040;
  --win-black: #000000;

  /* Title bar */
  --title-blue: #000080;
  --title-active: linear-gradient(90deg, #000080, #1084d0);

  /* Jazz cup palette */
  --jazz-teal: #00b4b4;
  --jazz-purple: #7b2d8e;
  --jazz-magenta: #d63384;
  --jazz-teal-light: #66d9d9;
  --jazz-purple-light: #b56ec5;

  /* Functional */
  --ok-green: #008000;
  --err-red: #cc0000;
  --warn-yellow: #ccaa00;
  --link-blue: #0000ff;

  /* Text */
  --text: #000000;
  --text-muted: #404040;
  --text-light: #808080;
  --text-on-dark: #ffffff;
  --text-on-teal: #ffffff;

  /* Typography */
  --font-system: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-display: 'VT323', 'Courier New', monospace;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --bevel-out: inset -1px -1px 0 var(--win-shadow), inset 1px 1px 0 var(--win-light), inset -2px -2px 0 var(--win-dark), inset 2px 2px 0 var(--win-gray);
  --bevel-in: inset 1px 1px 0 var(--win-shadow), inset -1px -1px 0 var(--win-light), inset 2px 2px 0 var(--win-dark), inset -2px -2px 0 var(--win-gray);
}

/* ── CRT / Scanline overlay ───────────────────────────────── */

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.03) 0px,
    rgba(0, 0, 0, 0.03) 1px,
    transparent 1px,
    transparent 3px
  );
  pointer-events: none;
  z-index: 9999;
}

/* ── Base ──────────────────────────────────────────────────── */

body {
  font-family: var(--font-system);
  font-size: 13px;
  color: var(--text);
  background: var(--win-bg);
  min-height: 100vh;
  line-height: 1.6;
}

a {
  color: var(--link-blue);
  text-decoration: underline;
}

a:hover {
  color: var(--jazz-purple);
}

code {
  font-family: var(--font-mono);
  background: var(--win-light);
  padding: 1px 4px;
  border: 1px solid var(--win-dark);
  font-size: 12px;
}

::selection {
  background: var(--title-blue);
  color: var(--text-on-dark);
}

/* ── Jazz Cup decorative wave ─────────────────────────────── */

.jazz-wave {
  position: relative;
  overflow: hidden;
}

.jazz-wave::before {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -20px;
  right: -20px;
  height: 120px;
  background:
    radial-gradient(ellipse 60% 40% at 20% 80%, var(--jazz-teal) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 60% 70%, var(--jazz-purple) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 90%, var(--jazz-magenta) 0%, transparent 50%);
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}