/* Design System de jordisalord.com — variables.

   El sitio es blanco. No «casi blanco con un crema de fondo»: blanco, con la
   retícula marcada por filetes de un píxel y el aire haciendo de separador.
   Las únicas manchas de color de la web son la fotografía de la naranja que
   preside la cabecera y los ecos del rótulo del héroe. Todo lo demás es
   tipografía negra sobre papel.

   El naranja no se ha elegido a ojo: es el tono dominante de esa fotografía
   («Taronja»), medido sobre el archivo. */
:root{
  color-scheme:light only;

  /* ── Marca ──────────────────────────────────────────────
     Un solo color corporativo, el naranja, en tres papeles:

       --acento         relleno vivo: el eco del héroe, la marca, los detalles.
                        El texto que se pone encima va en --tinta (7,2:1,
                        cumple AA); en blanco no llegaría ni a 2,5:1.
       --acento-fuerte  el mismo tono rebajado hasta 5,0:1 sobre blanco, que es
                        lo que hace falta para texto y enlaces.
       --acento-claro   fondos y realces suaves.

     El tono es el de la fotografía llevado al tope: el naranja dominante de
     «Taronja» cae en H=34°, S=0,98, y --acento es ese mismo naranja saturado y
     a pleno valor (H=35°, S=1, V=1). Un naranja apagado no era el de la foto.

     Las variables llevan nombre de papel y no de color a propósito: así un
     cambio de marca se hace aquí y no obliga a renombrar medio CSS. */
  --acento:#FF9500;
  --acento-fuerte:#A35F00;
  --acento-claro:#FFECD1;

  /* ── Neutros ────────────────────────────────────────────
     Grises puros, sin temperatura. Un neutro cálido tira del blanco hacia el
     crema y era justo lo que sobraba: aquí el papel tiene que ser papel.

       --tinta         titulares y texto fuerte      15,9:1
       --tinta-cuerpo  el cuerpo de texto            12,6:1
       --tinta-suave   rótulos y texto secundario     4,5:1 (el mínimo AA)  */
  --tinta:#222222;
  --tinta-cuerpo:#333333;
  --tinta-suave:#767676;
  --papel:#FFFFFF;
  /* Fondo apenas insinuado, para una caja que necesita despegarse del papel
     sin llegar a ser una tarjeta. Casi nunca hace falta. */
  --bruma:#FAFAFA;
  --borde:#EEEEEE;
  --borde-fuerte:#DDDDDD;

  /* ── La cinta del héroe ─────────────────────────────────
     Una pieza oscura en una web blanca, y con las tres bandas sacadas de la
     misma fotografía que da el color a todo lo demás: la sombra del gajo, el
     gajo a plena luz —que es el naranja de marca— y la pulpa blanca. Medidas
     sobre el archivo, no elegidas a ojo.

     Las mismas tres pintan los ecos de la palabra, así que la cinta y el
     rótulo hablan el mismo idioma en vez de parecer dos piezas pegadas.
     Sobre el fondo dan 3,0:1, 8,5:1 y 14,5:1: una escalera clara de lejos. */
  --cinta-fondo:#141110;
  --cinta-oscuro:#9C4A02;
  --cinta-medio:#FF9500;
  --cinta-claro:#F3DCC0;

  /* ── Tipografía ─────────────────────────────────────────
     Una sola familia para todo, como en la web original. El contraste no lo
     pone un segundo tipo de letra: lo ponen el peso (300 frente a 800) y la
     versalita espaciada de los rótulos. Los dos nombres se conservan porque
     dicen el papel, no la fuente. */
  --f-display:"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-texto:"Libre Franklin","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* Espaciado */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px;

  /* ── Radios y sombras ───────────────────────────────────
     A cero y a ninguna, y no por descuido. Las esquinas redondeadas y las
     sombras difusas eran lo que hacía que esto pareciera otra web: aquí las
     cajas se separan con un filete o con aire. La única sombra del sitio es
     sólida, se dibuja a mano y está en el héroe. */
  --radio:0;
  --radio-sm:0;
  --radio-pill:0;
  --radio-boton:2px;
  --sombra:none;
  --sombra-sm:none;

  /* Anchos. 1000px es el ancho de la caja de la web original. */
  --ancho:1000px;
  --medida:66ch;
}