/* =====================================================================
   BASE COMÚN (todas las clientas): fuentes alojadas en el propio sitio,
   escala de espaciado de 8 px, tamaños de texto y medidas.
   Los COLORES, las familias tipográficas, radios y sombras van en el tema:
   themes/<tema>.css -> se publica como /css/tema.css (scripts/generar.mjs).
   ===================================================================== */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fraunces-latin-opsz-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/fraunces-latin-opsz-italic.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  /* Tipografía (tamaños; las familias las pone el tema) */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xs: 13px;
  --fs-h1: clamp(40px, 6vw, 72px);
  --fs-h2: clamp(32px, 4.4vw, 46px);
  --fs-h3: 26px;
  --lh-body: 1.6;

  /* Espaciado (grid de 8 px — skill spatiere-si-footer) */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* Medidas */
  /* Pantallas grandes: 5 puntos más del ancho de la ventana (en tablet/móvil manda el 100 %) */
  --content-max: calc(1320px + 5vw);
  --content-max-ancho: calc(1440px + 5vw);   /* cabecera, barra superior y pie */
  --header-h: 72px;
  --tap: 48px;                 /* zona mínima de toque (>= 44 px, WCAG 2.5.8) */
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }
}