/* Tokens de Justicia Democracia Marbella.
   Copia parcial del sistema de diseño: solo los tokens que usa esta página.
   Fuente: design-system.json / tokens.json, versión 1. No inventes valores aquí. */

@font-face {
  font-family: "Archivo";
  src: url("fuentes/Archivo-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("fuentes/Karla-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color. La página entera va sobre mar-hondo, que es oscuro en los dos
     temas, así que el texto es siempre sobre-hondo y no hay variante clara. */
  --mar: #0b4a6e;
  --mar-hondo: #06283c;
  --mar-claro: #e8f3f9;
  --sol: #e9a426;
  --sierra: #9e3b22;
  --sobre-hondo: #ffffff;

  /* Tipografía */
  --font-display: "Archivo", "Arial Black", Helvetica, sans-serif;
  --font-texto: "Karla", "Segoe UI", system-ui, sans-serif;

  /* Espacio: escala de 4px */
  --espacio-2: 8px;
  --espacio-4: 16px;
  --espacio-6: 24px;
  --espacio-8: 32px;
  --espacio-12: 48px;
  --espacio-16: 64px;

  /* Foco */
  --foco: #7cc5e8;
}