html {
  color-scheme: dark;
}

body[data-theme="cyberpunk"] {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0, 245, 212, 0.035) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(90deg, rgba(0, 245, 212, 0.055) 1px, transparent 1px) 0 0 /
      44px 44px,
    linear-gradient(0deg, rgba(255, 61, 242, 0.045) 1px, transparent 1px) 0 0 /
      44px 44px,
    var(--bg);
}

body[data-theme="cyberpunk"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.05) 0 1px,
    transparent 1px 4px
  );
  opacity: 0.2;
}

body[data-theme="cyberpunk"]::selection {
  background: rgba(255, 61, 242, 0.7);
  color: #ffffff;
}

body[data-theme="cyberpunk"] h1,
body[data-theme="cyberpunk"] h2,
body[data-theme="cyberpunk"] h3 {
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-theme="cyberpunk"] h1 {
  font-size: 2.8rem;
  line-height: 1.05;
  text-shadow: 0 0 22px rgba(0, 245, 212, 0.28);
}

body[data-theme="cyberpunk"] h2 {
  font-size: 1.8rem;
}

body[data-theme="cyberpunk"] h3 {
  font-size: 1.2rem;
}

body[data-theme="cyberpunk"] a {
  color: inherit;
}

body[data-theme="cyberpunk"] a:focus-visible,
body[data-theme="cyberpunk"] button:focus-visible,
body[data-theme="cyberpunk"] summary:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
}

body[data-theme="cyberpunk"] img {
  filter: saturate(0.9) contrast(1.08);
}

@media (max-width: 640px) {
  body[data-theme="cyberpunk"] h1 {
    font-size: 2rem;
  }

  body[data-theme="cyberpunk"] h2 {
    font-size: 1.45rem;
  }
}