/* =========================================================
   Cypher404 — tokens.css
   Base compartida: variables, reset, capas CRT, utilidades.
   La cargan index.html (landing), book/ y terminal/.
   ========================================================= */

:root {
  /* Paleta base (terminal) */
  --bg:          #05080a;
  --bg-deep:     #020507;
  --panel:       #0a0f0d;
  --panel-2:     #0c1311;

  --fg:          #7CFFB2;   /* verde terminal principal */
  --fg-dim:      #3f7a5a;   /* verde apagado */
  --fg-soft:     #5fb98a;   /* verde medio */

  --cyan:        #22d3ee;
  --cyan-dim:    #0e7490;
  --amber:       #ffb454;   /* alerta / CTA */
  --red:         #ff5a6b;   /* error */
  --magenta:     #d264ff;   /* easter eggs */
  --white:       #e7fff2;

  /* Neón para fotos (rosa/azul de César) */
  --pink:        #ff4fd8;
  --violet:      #7c5cff;

  /* Tipografía */
  --mono: "JetBrains Mono", ui-monospace, "Fira Code", "IBM Plex Mono",
          "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  --display: "Chakra Petch", var(--mono);

  /* Métricas */
  --leading: 1.55;
  --radius: 8px;
  --glow: 0 0 8px rgba(124,255,178,0.35), 0 0 22px rgba(124,255,178,0.12);
  --glow-cyan: 0 0 10px rgba(34,211,238,0.45);

  --content-max: 1100px;
  --wide-max: 1240px;
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: var(--leading);
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  text-shadow: 0 0 1px rgba(124,255,178,0.4);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: var(--cyan); text-decoration: none; }
a:hover, a:focus-visible { text-shadow: var(--glow-cyan); outline: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

img { max-width: 100%; height: auto; display: block; }

/* =========================================================
   Capas atmosféricas: scanlines + viñeta
   ========================================================= */
.crt-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.025) 0px,
    rgba(255,255,255,0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.55;
  animation: crtFlicker 6s infinite;
}
.vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 8999;
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
}
@keyframes crtFlicker {
  0%, 100% { opacity: 0.55; }
  47%      { opacity: 0.58; }
  48%      { opacity: 0.48; }
  49%      { opacity: 0.56; }
}

/* =========================================================
   Utilidades
   ========================================================= */
.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;
}

/* Foco visible global */
:focus-visible {
  outline: 1px dashed rgba(124,255,178,0.6);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .crt-overlay { animation: none; }
}