/*  ██╗   ██╗ █████╗ ██████╗ ██╗ █████╗ ██████╗ ██╗     ███████╗███████╗ */
/*  ██║   ██║██╔══██╗██╔══██╗██║██╔══██╗██╔══██╗██║     ██╔════╝██╔════╝ */
/*  ██║   ██║███████║██████╔╝██║███████║██████╔╝██║     █████╗  ███████╗ */
/*  ╚██╗ ██╔╝██╔══██║██╔══██╗██║██╔══██║██╔══██╗██║     ██╔══╝  ╚════██║ */
/*   ╚████╔╝ ██║  ██║██║  ██║██║██║  ██║██████╔╝███████╗███████╗███████║ */
/*    ╚═══╝  ╚═╝  ╚═╝╚═╝  ╚═╝╚═╝╚═╝  ╚═╝╚═════╝ ╚══════╝╚══════╝╚══════╝ */

/*
================================================== 

Descripción:
  Variables que controlan el estilo del proyecto: colores, fuentes, tamaños y capas.
  Un solo archivo para cambiar la apariencia de todo en el proyecto.

================================================== 
*/

:root {
  
  /* == COLORES == */
  --color-fondo: #000000;
  --color-ventana-borde: #111111;
  --color-destacar: #efb810;
  --color-graffiti: #ff6b1a;
  /* Copia negra desplazada abajo y a la izquierda, sin desenfoque: es
     lo que hace que el texto se lea como letra duplicada de graffiti y
     no como sombra. La usan los rotulos, la etiqueta de hover, el
     boton de volver, el de ayuda y las equis de cerrar. */
  --sombra-graffiti: -6px 6px 0 #000;
  --sombra-graffiti-fuerte: -10px 10px 0 #000;
  --color-texto: #f1e6d2;
  --color-texto-oscuro: #2b1d16;


  /* == FUENTES == */
  --fuente-base: arial, serif;
  --fuente-titulos: "germaniaOne", cursive;
  --fuente-mono: "Courier New", monospace;

  
  /* == TAMAÑOS Y BORDES == */
  --borde-ventana: 14px;
  --radio-esquina: 6px;

  /* == VENTANA (Renderizatron) ==
     Espejo en CSS puro de las constantes de renderizatron.js
     (DISPONIBLE_X=.9, DISPONIBLE_Y=.85, VENTANA_W/H=1000): el tamaño
     real que ocupa la ventana escalada en pantalla. Sirve para que
     elementos fuera de la ventana (como .boton-ayuda, que es
     position:fixed y no hereda su transform:scale) puedan calcular su
     posición y tamaño proporcionales sin depender de JS. Si cambian
     esas constantes en renderizatron.js, cambiar también esto. */
  --medida-ventana: min(90vw, 85vh, 1000px);

  
  /* == CAPAS (z-index) == */
  --z-base: 1;
  --z-interactivo: 10;
  --z-ventana: 100;
  --z-modal: 9999;
  --z-maximo: 99999;
}