/* skin.css · Piel del Veredicto: «Policial de Bolso» (territorio C, elegido por el dueño el 2026-10-24).
   Fuente: Productos\DETECTIVE PT\Duelo de Detetives BRANDING.txt (§1 paleta y duelo de dos tintas,
   §2 tipografía, §3 sello N.º / esquinas rectas / sombra plana, §4 «Veredicto (celular)») y la pantalla
   del celular de produccion\territorios\territorio-C.png / .html, de donde salen los valores.
   Acá están TODOS los colores, fuentes, radios, sombras y tramas. app.css solo usa estas variables:
   para cambiar la piel se reemplaza este archivo.
   Reglas de la marca que la disposición respeta:
   - Dos tintas sobre papel. Un solo rojo lleno por pantalla (el botón principal o el sello N.º).
   - Correcto: negro lleno con un visto en papel claro (nada de verde). Incorrecto: rojo en línea.
   - Duelo: jugador I negro lleno, jugador II rojo en línea; III-VI negro en línea y tramas; siempre con
     su número romano. Esquinas rectas, filetes gruesos, sombra plana corrida. Nada de emojis.
   Las fuentes de Google se piden aparte, en skin-fuentes.css (también es parte de la piel), para que una
   conexión lenta no frene la página: mientras tanto se ve con las fuentes de respaldo. */

:root {
  /* Fuentes (§2): Big Shoulders Display para títulos, etiquetas, números y botones; Literata para el texto */
  --fuente-titulo: 'Big Shoulders Display', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --fuente-texto: 'Literata', Georgia, 'Times New Roman', serif;
  --fuente-cifras: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --peso-normal: 400;
  --peso-medio: 600;
  --peso-fuerte: 700;
  --peso-titulo: 900;
  --peso-etiqueta: 800;
  --tam-base: 18px;
  --espaciado-rotulo: 0.2em;
  --espaciado-caso: 0.32em;
  --espaciado-boton: 0.12em;

  /* Paleta (§1) */
  --c-papel: #E8D6AC;           /* fondo del Veredicto */
  --c-papel-claro: #EFE2C0;     /* la pantalla de una pregunta, superficies */
  --c-gastado: #D2BA86;         /* bordes y separadores finos */
  --c-tinta: #1B1712;           /* texto, títulos, filetes, cabecera, botón secundario */
  --c-rojo: #C32B21;            /* rojo único: lleno una sola vez por pantalla */

  /* Usos (lo que lee app.css) */
  --c-fondo: var(--c-papel);
  --c-superficie: var(--c-papel-claro);
  --c-texto: var(--c-tinta);
  --c-texto-suave: #4A3E31;     /* bajadas en itálica (valor de la lámina) */
  --c-linea: var(--c-gastado);
  --c-filete: var(--c-tinta);
  --c-cabecera: var(--c-tinta);
  --c-cabecera-texto: var(--c-papel-claro);
  --c-cabecera-suave: #D9C9A4;  /* el caso en itálica, en la cabecera (valor de la lámina) */
  --c-primario: var(--c-rojo);
  --c-primario-texto: var(--c-papel-claro);
  --c-lleno: var(--c-tinta);    /* negro lleno: opción elegida, correcto, jugador I */
  --c-lleno-texto: var(--c-papel-claro);
  --c-acento: var(--c-rojo);    /* rojo en línea o en texto */
  --c-sello: var(--c-rojo);
  --c-sello-texto: var(--c-papel-claro);
  --c-sello-borde: var(--c-tinta);
  --c-foco: var(--c-rojo);
  --c-barra-navegador: #1B1712;

  /* Radios (§3: esquinas rectas; solo el sello es redondo) */
  --radio: 0;
  --radio-sello: 50%;

  /* Sombras (§3: plana corrida, 7 px a la derecha y 9 px abajo, #504014 al 35 %) */
  --sombra-plana: 7px 9px 0 rgba(80, 64, 20, 0.35);
  --sombra-boton: none;

  /* Filetes (§3: gruesos 3-4 px para bloques, finos 1-1,5 px para filas) */
  --filete-grueso: 3px;
  --filete-fino: 1.5px;

  /* Tramas del duelo para 4 a 6 detectives (§1) y textura de papel (lámina) */
  --trama-rayas: repeating-linear-gradient(-45deg, rgba(27, 23, 18, 0.22) 0 2px, transparent 2px 7px);
  --trama-puntos: radial-gradient(rgba(27, 23, 18, 0.32) 1.3px, transparent 1.6px) 0 0 / 7px 7px;
  --trama-rayas-rojo: repeating-linear-gradient(-45deg, rgba(195, 43, 33, 0.28) 0 2px, transparent 2px 7px);
  --textura-papel: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .05  0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Modo oscuro (§1): el rojo no cambia; se invierten el papel y la tinta. */
@media (prefers-color-scheme: dark) {
  :root {
    --c-fondo: #14110D;
    --c-superficie: var(--c-tinta);
    --c-texto: var(--c-papel-claro);
    --c-texto-suave: var(--c-gastado);
    --c-linea: #4A3E31;
    --c-filete: var(--c-papel-claro);
    --c-cabecera: var(--c-papel);
    --c-cabecera-texto: var(--c-tinta);
    --c-cabecera-suave: #4A3E31;
    --c-lleno: var(--c-papel-claro);
    --c-lleno-texto: var(--c-tinta);
    --c-sello-borde: var(--c-papel);
    --c-barra-navegador: #E8D6AC;
    --sombra-plana: 7px 9px 0 rgba(0, 0, 0, 0.5);
    --trama-rayas: repeating-linear-gradient(-45deg, rgba(239, 226, 192, 0.22) 0 2px, transparent 2px 7px);
    --trama-puntos: radial-gradient(rgba(239, 226, 192, 0.32) 1.3px, transparent 1.6px) 0 0 / 7px 7px;
    --textura-papel: none;
  }
}