/* ═══════════════════════════════════════════════════════════════
   PIEL — Romeo Grisoni · En 9 días 9 horas 9 minutos
   ───────────────────────────────────────────────────────────────
   La tapa es casi monocroma: el vacío, el gris del portal y una
   sola luz amarilla en el remolino. De ahí sale todo:

   · vacío   #05070B  el negro azulado de la tapa (#000205/#010409)
   · plata   #DCDDD8  el metal de los tres 9
   · luz     #D2C77F  la luz del portal (muestreada: #C8C080)

   La página entera es noche, sobre el campo de estrellas de
   Gustavo Acevedo (el fondo de la contratapa). Romeo lo pidió así,
   y no eligió paleta clara en el formulario: no aplica la
   excepción de "pidió claro y la tapa es oscura".

   Este archivo sólo define tokens. Los componentes propios van en
   romeo.css, que se carga DESPUÉS del núcleo (como el
   sobre-nucleo.css de Andrea) para no pelear especificidad.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --fondo:            #05070B;   /* el vacío */
  --fondo-suave:      #0C1015;   /* paneles apenas levantados */
  --fondo-medio:      #141920;
  --fondo-oscuro:     #020306;   /* barra fija y pie */

  --acento:           #D2C77F;   /* la luz del portal — botón principal */
  --acento-oscuro:    #E4DBA0;   /* hover: sobre negro, "más oscuro" es más luz */
  --acento-claro:     #D2C77F;   /* foco y detalles sobre fondo oscuro */
  --acento-texto:     #D2C77F;   /* 11.73:1 sobre el vacío */

  --plata:            #DCDDD8;   /* los 9 y los títulos */
  --texto:            #C9CCCB;   /* 12.46:1 sobre el vacío */
  --texto-suave:      #8E949A;   /* 6.58:1 sobre el vacío · 6.23:1 sobre panel */
  --texto-claro:      #05070B;   /* texto SOBRE el botón de luz: 11.73:1 */
  --texto-claro-suave:#8E949A;

  --font-display: 'Big Shoulders Stencil Display', 'Arial Narrow', sans-serif;
  --font-titulo:  'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --font-serif:   'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans:    'Spectral', Georgia, serif;   /* el núcleo la usa en .prosa y botones; acá todo se lee en serif */
  --font-mono:    'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --espacio-xs: 0.5rem;
  --espacio-sm: 1rem;
  --espacio-md: 1.75rem;
  --espacio-lg: 3rem;
  --espacio-xl: 5rem;
  --espacio-2xl: 7.5rem;

  --radio-sm: 2px;
  --radio-md: 2px;

  --sombra-foto:       0 30px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(220, 221, 216, 0.08);
  --sombra-foto-hover: 0 34px 90px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(210, 199, 127, 0.25);

  --suave: cubic-bezier(0.16, 1, 0.3, 1);
  --medida: 660px;
}

@media (max-width: 640px) {
  :root {
    --espacio-lg: 2.25rem;
    --espacio-xl: 3rem;
    --espacio-2xl: 4rem;
  }
}

/* ── TIPOGRAFÍAS PROPIAS ─────────────────────────────────────────
   Big Shoulders: la stencil para los 9 (la tapa los tiene cortados
   como chapa) y la condensada para las palabras, que en la tapa
   también son condensadas. Spectral para leer. Martian Mono para
   folios, páginas y el contador. */
@font-face { font-family: 'Big Shoulders Stencil Display'; src: url('../fonts/bigshoulders-stencil-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Big Shoulders Display'; src: url('../fonts/bigshoulders-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Spectral'; src: url('../fonts/spectral-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('../fonts/martianmono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }