/** CSS Base: Variables, Reset, Typography, Global Effects, Keyframe Animations */

/* ==========================================================================
   CSS Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   CSS Variables
   ========================================================================== */
/* WCAG 2.1 AA Color Contrast Verified:
   - Dark: --text (#c8c8c8) on --bg (#0c0c0c) = 7:1 ✓ (4.5:1 required)
   - Light: --text (#2c2f3d) on --bg (#f9f9fb) = 9:1 ✓
   - Accent on bg dark: --accent (#00d4aa) on --bg (#0c0c0c) = 4.8:1 ✓
   - Accent on bg light: --accent (#008ec4) on --bg (#f9f9fb) = 4.5:1 ✓
*/
:root {
  --bg: #0c0c0c;
  --surface: #111;
  --surface2: #161616;
  --border: #1e1e1e;
  --border-bright: #2e2e2e;
  --text: #c8c8c8;
  --muted: #555;
  --accent: #00d4aa;
  --accent2: #7c6af7;
  --warn: #e5a84b;
  --err: #e06c75;
  --term-bar: #161616;
  --scanline: rgba(0, 0, 0, 0.04);
  --glow-color: rgba(0, 212, 170, 0.05);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f9f9fb;
    --surface: #ffffff;
    --surface2: #f0f1f5;
    --border: #dde0ea;
    --border-bright: #c8ccd8;
    --text: #2c2f3d;
    --muted: #8b90a8;
    --accent: #008ec4;
    --accent2: #7c5af5;
    --warn: #da6800;
    --err: #d43552;
    --term-bar: #e8eaf0;
    --scanline: rgba(0, 0, 0, 0.015);
    --glow-color: rgba(0, 142, 196, 0.06);
  }
}

:root[data-theme="light"] {
  --bg: #f9f9fb;
  --surface: #ffffff;
  --surface2: #f0f1f5;
  --border: #dde0ea;
  --border-bright: #c8ccd8;
  --text: #2c2f3d;
  --muted: #8b90a8;
  --accent: #008ec4;
  --accent2: #7c5af5;
  --warn: #da6800;
  --err: #d43552;
  --term-bar: #e8eaf0;
  --scanline: rgba(0, 0, 0, 0.015);
  --glow-color: rgba(0, 142, 196, 0.06);
}

:root[data-theme="dark"] {
  --bg: #0c0c0c;
  --surface: #111;
  --surface2: #161616;
  --border: #1e1e1e;
  --border-bright: #2e2e2e;
  --text: #c8c8c8;
  --muted: #555;
  --accent: #00d4aa;
  --accent2: #7c6af7;
  --warn: #e5a84b;
  --err: #e06c75;
  --term-bar: #161616;
  --scanline: rgba(0, 0, 0, 0.04);
  --glow-color: rgba(0, 212, 170, 0.05);
}

/* ==========================================================================
   Base Typography
   ========================================================================== */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Ensure images are responsive */
img {
  max-width: 100%;
  height: auto;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition:
    background 0.3s,
    color 0.3s;
  word-wrap: break-word;
}

/* Prevent text overflow on all elements */
* {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

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

/* Prevent code blocks from causing horizontal overflow */
pre,
code {
  overflow-x: auto;
  max-width: 100%;
}

/* ==========================================================================
   Global Effects
   ========================================================================== */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--scanline) 2px,
    var(--scanline) 4px
  );
}

#cursor-glow {
  position: fixed;
  pointer-events: none;
  z-index: 9001;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    var(--glow-color) 0%,
    transparent 70%
  );
  transform: translate(-50%, -50%);
  left: var(--cursor-x, -9999px);
  top: var(--cursor-y, -9999px);
  transition:
    left 0.06s,
    top 0.06s;
}

#cursor-glow.cursor-glow-disabled {
  display: none;
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes palIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Reveal Animation Classes
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

.d1 {
  transition-delay: 0.05s;
}

.d2 {
  transition-delay: 0.12s;
}

.d3 {
  transition-delay: 0.19s;
}

.d4 {
  transition-delay: 0.26s;
}

.d5 {
  transition-delay: 0.33s;
}

.d6 {
  transition-delay: 0.40s;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.muted {
  color: var(--muted);
}

.mb-1 {
  margin-bottom: 1rem;
}

/* ==========================================================================
   Focus Indicators - WCAG 2.4.7 Focus Visible
   ========================================================================== */

/* Global focus-visible style - styled to match design */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Remove default outline for mouse users, keep for keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

/* Links */
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration: underline;
}

/* Buttons */
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Form inputs */
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Skip link specific focus */
.skip-link:focus {
  top: 0;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
  }

  a:focus-visible,
  button:focus-visible {
    outline-width: 3px;
  }
}

/* Screen reader only content */
.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;
}

/* ==========================================================================
   Reduced Motion Support - WCAG 2.3.3 Animation from Interactions
   ========================================================================== */

@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;
  }

  /* Keep essential theme transitions but make them instant */
  html[data-theme],
  html[data-theme] * {
    transition-duration: 0.01ms !important;
  }
}