/*
 * Paleta, tipografías y espaciados.
 * Es el único archivo que hay que tocar para cambiar la identidad visual.
 * Los contrastes están comprobados contra WCAG 2.2 AA (texto 4,5:1, bordes 3:1).
 */

@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*
 * Respaldo con métricas equivalentes a Figtree.
 *
 * Con font-display: swap el texto se pinta primero con la tipografía del
 * sistema. Si esa no ocupa lo mismo, al llegar Figtree el texto salta y eso
 * cuenta como desplazamiento de diseño (CLS). Los valores de size-adjust y de
 * ascent/descent están medidos comparando ambas tipografías en el navegador.
 */
@font-face {
  font-family: 'Figtree respaldo';
  src: local('Arial'), local('Helvetica'), local('Liberation Sans');
  font-weight: 400;
  size-adjust: 100.3%;
  ascent-override: 94.7%;
  descent-override: 24.9%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Figtree respaldo';
  src: local('Arial Bold'), local('Arial'), local('Liberation Sans Bold');
  font-weight: 700;
  size-adjust: 96%;
  ascent-override: 98.9%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  /* Color ------------------------------------------------------------- */
  --bg:            #ffffff;
  --surface:       #f2f7f6;   /* tarjetas y bandas alternas */
  --ink:           #0f272b;   /* texto, 15,6:1 sobre blanco */
  --ink-muted:     #4a6063;   /* texto secundario, 6,7:1 */
  --primary:       #0e6b6b;   /* enlaces y títulos, 6,3:1 */
  --primary-dark:  #0a5252;   /* hover, 9,0:1 */
  --accent:        #b23d0a;   /* botones de acción, 5,9:1 */
  --accent-dark:   #8f3108;   /* hover, 8,0:1 */
  --border:        #6f8a8a;   /* bordes de controles, 3,7:1 */
  --border-soft:   #d8e4e2;   /* separadores decorativos */
  --on-dark:       #ffffff;
  --on-dark-link:  #a8dcd8;   /* enlaces sobre fondo oscuro, 10,3:1 */
  --focus:         #b23d0a;
  --focus-dark:    #ffc08a;

  /* Tipografía --------------------------------------------------------- */
  --font: 'Figtree', 'Figtree respaldo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --step--1: clamp(0.88rem, 0.86rem + 0.1vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.7vw, 1.85rem);
  --step-3:  clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2rem, 1.6rem + 2vw, 3.1rem);

  /* Espaciado ---------------------------------------------------------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Medidas ------------------------------------------------------------ */
  --measure:   68ch;
  --container: 68rem;
  --radius:    10px;
  --header-h:  4.25rem;
}