/* Pequenauta — fichas de diseño y tipografía
   Hoja común del sitio: la comparten la home y los tres juegos.

   Aquí vive el vocabulario —colores, espaciado, tipografía, radios, sombras,
   tiempos y capas— y nada más. El `body` no: el degradado del mar, el centrado
   y el `flex` son decisión del Tesoro, y si la home los heredara saldría
   vestida de juego. Cada página monta su `body` sobre estas fichas.

   La paleta nació con el rediseño oceánico del Tesoro (v0.3.1): aventura
   tropical vista desde el mar, azules de océano al fondo, oro y arena para el
   tesoro, verde de selva para las islas. Alto contraste, porque el sitio es
   para niños y se usa sobre todo en móvil y tablet. Los juegos dibujan su arte
   en SVG con estos mismos tokens, así que un color que cambie aquí cambia
   también las islas y los personajes.

   Los fondos comprables de la tienda del Tesoro no están aquí: redefinen tres
   de estos tokens desde `tesoro-tablas/css/base.css`, que es de quien son. */

/* Dos tipografías, las dos variables (un fichero cubre todos los pesos) y
   autoalojadas: el sitio tiene que abrir sin esperar a un tercero, y el
   Tesoro se quiere PWA en su v0.5. `swap` para que se vea desde el primer
   fotograma aunque tarden. */
@font-face {
  font-family: "Fredoka";
  src: url("../fuentes/fredoka.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Nunito";
  src: url("../fuentes/nunito.woff2") format("woff2");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* Color: el mar en tres alturas, de la superficie al fondo. */
  --mar-claro: #1a91c9;
  --mar: #0b5e8c;
  --mar-profundo: #063a5c;

  --cielo-calido: #b5e4f7;

  --oro: #f5a623;
  --oro-claro: #ffd234;

  --arena: #f5d87a;
  --arena-clara: #fdf0c2;

  --selva-oscura: #1e7a3a;
  --selva: #2d9447;
  --selva-clara: #5cc16a;

  --coral: #ff6b6b;
  --coral-oscuro: #e84040;

  --madera: #8b5e3c;
  --madera-clara: #a06830;
  --tinta: #1a2744;

  --texto: #ffffff;
  --texto-invertido: var(--tinta);
  --apagado: rgba(255, 255, 255, 0.55);

  /* Vidrio esmerilado: el material del que están hechos los paneles, las
     fichas de perfil y los artículos de la tienda. Se define una vez aquí
     para que todos se vean del mismo material. */
  --vidrio: rgba(255, 255, 255, 0.12);
  --vidrio-tenue: rgba(255, 255, 255, 0.07);
  --vidrio-borde: rgba(255, 255, 255, 0.25);
  --vidrio-oscuro: rgba(0, 0, 0, 0.25);
  --desenfoque: blur(12px);

  /* Espaciado */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;

  /* Tipografía: Fredoka para lo que se mira (títulos, cifras, botones) y
     Nunito para lo que se lee (párrafos, ayuda). */
  --tipo-titulo: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --tipo-texto: "Nunito", "Segoe UI", system-ui, sans-serif;

  /* Radios: vuelven a tener valor en la v0.3.1. Redondo es amable, y en
     ilustración vectorial no hay ninguna razón para la esquina viva. */
  --radio-s: 0.75rem;
  --radio-m: 1rem;
  --radio-g: 1.5rem;

  /* Sombras. Los botones ya no llevan borde inferior sólido: se hunden con un
     desplazamiento de 2px y la sombra hace el resto. */
  --sombra-boton: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.25);
  --sombra-panel: 0 0.5rem 2rem rgba(0, 0, 0, 0.25);
  --sombra-oro: 0 0.25rem 0.75rem rgba(245, 166, 35, 0.4);
  --sombra-texto: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4);

  /* Tiempos */
  --rapido: 120ms;
  --medio: 260ms;
  --lento: 600ms;

  /* Capas */
  --z-fondo: 0;
  --z-hud: 10;
  --z-volador: 20;
  --z-cofre: 30;
  --z-ajustes: 40;
  --z-ayuda: 50;
  /* El banner de cookies va por encima de todo, incluida la ayuda del juego:
     tiene que verse esté abierta la pantalla que esté. */
  --z-consentimiento: 60;
}