/**
 * Retro mode styles for the "Press Start" easter egg.
 *
 * The rules in this file intentionally use `!important` to guarantee that the
 * retro theme wins over Tailwind's utility classes when the `.retro-mode`
 * class is toggled on the document root. Keeping the declarations in a single
 * location makes it easier to audit and adjust without hunting through the
 * component tree.
 */
@font-face {
  font-family: "Press Start 2P";
  /* Hosted on the author's CDN to keep the bundle lean while still loading quickly. */
  src: url("https://cdn.lanfermann.dev/fonts/PressStart2P-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --retro-font-family: "Press Start 2P", cursive;
  --retro-font-size: 0.8rem;
  --retro-foreground: #00ff00;
  --retro-accent: #ff00ff;
  --retro-background: #000000;
}

.retro-mode,
.retro-mode * {
  font-family: var(--retro-font-family) !important;
  font-size: var(--retro-font-size) !important;
  color: var(--retro-foreground) !important;
  border-color: var(--retro-foreground) !important;
}

/*
 * Avoid inverting imagery while ensuring the CRT inspired black background is
 * applied everywhere else. The :where() selector keeps the specificity low so
 * Tailwind can still override individual components when absolutely necessary.
 */
.retro-mode,
.retro-mode :where(*:not(img, svg, video, canvas)) {
  background-color: var(--retro-background) !important;
}

.retro-mode a {
  color: var(--retro-accent) !important;
}