/* ── Radio Arkana · tokens compartidos ──────────────────────────────────────
   Lo cargan todas las páginas antes de su propio <style>; cada página define
   solo sus variables propias (y el tema claro de la portada sobrescribe estas).
   Negro + rojo de Radio Arkana como único acento; ámbar para «lo que se hace
   aquí» (la letanía), rojo para «lo que viene de fuera» (el directo).
   Contraste sobre --bg: --white 17:1 · --gray-lt 7:1 · --gray 5,6:1 ·
   --red 4,9:1 · --amber 7,6:1.  Espaciado en múltiplos de 4 px.            */
:root {
  --bg:        #0a0a0a;
  --surface:   #111111;
  --surface-2: #181818;
  --border:    #1e1e1e;
  --border-2:  #2b2b2b;
  --white:     #f0ece4;
  --gray-lt:   #a39d94;
  --gray:      #8a8a8a;
  --gray-dim:  #757575;
  --red:       #e63030;
  --red-hi:    #ff4d4d;
  --red-lo:    #b42222;
  --red-dim:   #7a1a1a;
  --red-soft:  #ef5d5d;
  --red-wash:  rgba(230,48,48,.12);
  --amber:     #ce9d06;
  --ok:        #3fbf7f;

  --font-head: 'Bebas Neue', sans-serif;
  --font-body: 'Space Mono', monospace;
  --font-mono: 'Space Mono', monospace;
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 22px; --fs-xl: 26px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r1: 4px; --r2: 8px;
  --ease: 160ms ease-out;
}

/* Foco visible solo con teclado; nada de animaciones si el sistema pide reducirlas */
:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}