/* ==========================================================================
   Revista Fuente — tokens de diseño
   Único sitio donde viven los colores de marca y la escala tipográfica.
   Si un color de marca aparece escrito a mano en otro archivo, está mal.
   ========================================================================== */

:root {
  /* --- Marca ------------------------------------------------------------ */
  --ladrillo:          #B03A24;  /* marca, enlaces, antetítulos — 9,1:1 sobre papel */
  --ladrillo-oscuro:   #8E2D1B;  /* hover */
  --ladrillo-claro:    #E8795E;  /* acento sobre fondo tinta — 6,3:1 */

  /* --- Superficies ------------------------------------------------------ */
  --papel:             #FFFFFF;  /* fondo principal */
  --crema:             #F7F4F0;  /* bloques de descanso */
  --rosa:              #FAF0ED;  /* franja «en desarrollo» */
  --tinta:             #16130F;  /* texto principal y franjas de vídeo */
  --tinta-2:           #262220;  /* campos sobre tinta */

  /* --- Texto ------------------------------------------------------------ */
  --texto:             #16130F;
  --texto-cuerpo:      #241F1A;  /* cuerpo de nota */
  --texto-2:           #5C554E;  /* secundario — 7,3:1 sobre papel */
  --texto-inv:         #FFFFFF;  /* sobre tinta */
  --texto-inv-2:       #BFB7AF;  /* secundario sobre tinta */

  /* --- Líneas ----------------------------------------------------------- */
  --linea:             #E3DDD6;
  --linea-suave:       #EFE9E2;
  --linea-inv:         #2E2926;
  --linea-rosa:        #F0DDD7;

  /*
 * --- Tokens que todavía no lee nadie -----------------------------------
 *
 * Revisados uno a uno el 30 de octubre de 2026 (decisión D33). Un token que no
 * está conectado a nada es una mentira silenciosa en la hoja que se supone que es
 * la fuente de verdad, así que aquí queda dicho cuál es cuál:
 *
 *   --hueco-img, --hueco-img-inv .... solo para las maquetas del lienzo. No se
 *                                     usan en el portal y no deberían usarse.
 *   --ancho-max ..................... documental: ver arriba.
 *   --t-secundario, --t-tarjeta ..... la escala que aplicarán los pasos que
 *   --texto-cuerpo, --linea-suave ... rehagan la nota y el móvil (paso 9).
 *   --tinta-2, --linea-rosa
 *   --ladrillo-oscuro ............... el hover del ladrillo; hoy el portal lo
 *                                     resuelve con sus propias mezclas.
 *   --margen-lateral, --margen-movil  el portal tiene los suyos en portal.css.
 *   --r-tarjeta, --r-pildora ........ redondeos que este portal no usa: sus
 *                                     esquinas son vivas, por manual de marca.
 *
 * Los que sobren de verdad cuando el paso 9 esté hecho, se borran.
 */

/* --- Marcador de imagen (solo maquetas) ------------------------------- */
  --hueco-img:         #DDD5CC;
  --hueco-img-inv:     #2A2522;

  /* --- Tipografía ------------------------------------------------------- */
  --serif:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Escala: apertura · rótulo · secundario · tarjeta · cuerpo · entradilla · antetítulo */
  --t-apertura:    50px;
  --t-rotulo:      30px;
  --t-secundario:  25px;
  --t-tarjeta:     21px;
  --t-cuerpo:      19px;
  --t-entradilla:  14px;
  --t-antetitulo:  11px;

  --t-cuerpo-alto: 1.72;   /* interlínea del cuerpo de nota */
  --t-titular-alto: 1.1;
  --medida:        68ch;   /* ancho de lectura del cuerpo */

  /* --- Espaciado y formas ----------------------------------------------- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-5: 24px;  --e-6: 32px;  --e-7: 48px;  --e-8: 64px;

  --r-chapa:  3px;   /* chapas, botones, campos */
  --r-tarjeta: 4px;
  --r-modulo:  6px;
  --r-pildora: 999px;

  /* Documental, no operativo: quien capa el armazón es Theme:ShellWidth, que se
     cambia desde el panel, y ese ajuste nace en 1.440 (decisión D38). Ninguna regla
     lee este token, y es a propósito: si lo leyera, el ajuste del panel dejaría de
     servir para nada.

     El 1.280 que traía el lienzo se midió y se descartó: daba tres columnas y 704 px
     más de página por 62 px más de tarjeta. */
  --ancho-max:  1440px;
  --margen-lateral: 32px;
  --margen-movil:   16px;

  /* --- Interacción ------------------------------------------------------ */
  --toque-min: 44px;   /* área táctil mínima, no negociable */
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   Tema oscuro
   El sitio ya tiene variante de logo oscuro, así que el tema existe.
   Engancha esto al mecanismo que ya use el proyecto; aquí van las dos vías
   habituales (preferencia del sistema y atributo explícito).
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel:          #121110;
    --crema:          #1B1917;
    --rosa:           #2A1B16;
    --tinta:          #0B0A09;
    --tinta-2:        #221F1D;

    --texto:          #F4F1ED;
    --texto-cuerpo:   #E8E3DD;
    --texto-2:        #A8A099;
    --texto-inv:      #FFFFFF;
    --texto-inv-2:    #BFB7AF;

    --ladrillo:       #E8795E;   /* sobre fondo oscuro el ladrillo pleno no pasa contraste */
    --ladrillo-oscuro:#F4A48F;
    --ladrillo-claro: #E8795E;

    --linea:          #2E2926;
    --linea-suave:    #231F1D;
    --linea-inv:      #3A3431;
    --linea-rosa:     #3A2520;

    --hueco-img:      #2A2522;
    --hueco-img-inv:  #2A2522;
  }
}

:root[data-theme="dark"] {
  --papel:          #121110;
  --crema:          #1B1917;
  --rosa:           #2A1B16;
  --tinta:          #0B0A09;
  --tinta-2:        #221F1D;

  --texto:          #F4F1ED;
  --texto-cuerpo:   #E8E3DD;
  --texto-2:        #A8A099;
  --texto-inv:      #FFFFFF;
  --texto-inv-2:    #BFB7AF;

  --ladrillo:       #E8795E;
  --ladrillo-oscuro:#F4A48F;
  --ladrillo-claro: #E8795E;

  --linea:          #2E2926;
  --linea-suave:    #231F1D;
  --linea-inv:      #3A3431;
  --linea-rosa:     #3A2520;

  --hueco-img:      #2A2522;
  --hueco-img-inv:  #2A2522;
}

/* ==========================================================================
   Tipografía autoalojada

   Las dos familias están en wwwroot/fonts/ y se declaran en css/fuentes.css,
   que la plantilla carga ANTES de esta hoja: seis binarios variables con sus
   unicode-range, 324 KB en total, de los que una página cualquiera baja dos o
   tres. Las licencias OFL viajan al lado de los binarios, que es lo que la
   licencia pide.

   Aquí solo quedan los nombres de familia —'Source Serif 4' e 'Inter'—, que es
   lo que esta hoja tiene que decir. El respaldo (Georgia, system-ui) sigue
   declarado por si un .woff2 no llega.
   ========================================================================== */

/* ==========================================================================
   Lo que esta hoja NO trae, y dónde está

   El original de diseño traía aquí tres cosas más. Se han sacado porque esta
   hoja son los tokens y nada más:

   - Reglas base (body, a, mínimo táctil, .sr): las pone portal.css, que es la
     hoja del portal y sigue mandando. Repetirlas aquí sería pelearse con ella
     por orden de carga.
   - El logo animado (.logo, .logo-marca, .logo-regla, .logo-bajada): es del
     paso 4, el de la cabecera. Un CSS que nadie usa no se guarda «para luego»:
     entra cuando se envuelva el logotipo real en la plantilla.
   - La puerta del anticipo en vídeo (prefers-reduced-motion / hover: none): ya
     está en portal.css desde el 28 de octubre, y en video-anticipo.js.
   ========================================================================== */