/* ==========================================================================
   variables.css
   --------------------------------------------------------------------------
   Tokens de diseño del proyecto. Único lugar donde se declaran valores
   primitivos (medidas, colores, tipografía). El resto de módulos consume
   estas variables y nunca escribe valores literales.

   Se carga el PRIMERO de los 5 módulos del tema hijo, para que todo lo
   que venga después pueda usar los tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breakpoints del proyecto (referencia — CSS no permite variables en @media,
   por lo que estos valores se escriben literales en responsive.css):

     480px    móvil grande
     768px    tablet
    1024px    desktop
    1280px    ancho máximo de contenido

   Enfoque mobile-first: los estilos base son para móvil y se amplían
   con media queries min-width.
   -------------------------------------------------------------------------- */

:root {

  /* ---- Layout ---- */
  --content-max: 1280px;          /* ancho máximo del contenido; los fondos de sección pueden ser full-width */
  --gutter: 32px;                 /* separación entre columnas / bloques */
  --side-margin-mobile: 16px;     /* margen lateral en móvil (< 768px) */
  --side-margin: 24px;            /* margen lateral desde tablet (>= 768px) */

  /* --------------------------------------------------------------------
     Color — paleta del proyecto
     Nombres semánticos (por función, no por el color literal): si algún día
     cambia la identidad visual, se cambia el valor aquí y no hay que tocar
     ningún otro archivo.
     -------------------------------------------------------------------- */

  /* Azul petróleo. Color corporativo principal: cabecera, pie, titulares
     destacados, elementos de marca. */
  /* --------------------------------------------------------------------
     LA PILA DE SÍMBOLOS
     --------------------------------------------------------------------
     Para las flechas y los puntos que se pintan con content: en CSS. Poppins
     no tiene «→» ni «↓», así que el navegador ya estaba sustituyendo por su
     cuenta; aquí se le dice por qué. El orden va del sistema más probable al
     último recurso.

     NO SE REUTILIZA --font-primary AQUÍ, y es el detalle que importa: aquella
     pila acaba en «sans-serif», que es una familia genérica, y en cuanto el
     navegador llega a una genérica deja de buscar. Poniéndola delante, las
     fuentes de símbolos de después no se llegarían a mirar nunca. Por eso se
     escribe Poppins sola y las genéricas van al final.
     -------------------------------------------------------------------- */
  --font-symbols: Poppins, "Segoe UI Symbol", "Apple Symbols",
    "Noto Sans Symbols 2", "Noto Sans Symbols", "DejaVu Sans", sans-serif;

  --color-primary: #254961;

  /* Rojo teja. Color de acento, reservado para llamadas a la acción (CTAs),
     enlaces destacados y estados activos. Usarlo con moderación: pierde
     fuerza como acento si se generaliza. */
  --color-accent: #c94644;

  /* Negro. Color del texto principal en todo el sitio. */
  --color-text: #000000;

  /* Blanco. Fondo base de la página y de las secciones por defecto. */
  --color-bg: #ffffff;

  /* Gris claro. Fondo de secciones alternas, para separar bloques
     consecutivos sin recurrir a bordes ni líneas divisorias. */
  --color-bg-alt: #efefef;

  /* ---- Tipografía ----
     Fuente del proyecto: Poppins.

     IMPORTANTE: Poppins NO se carga desde el CDN de Google Fonts. Hacerlo
     envía la IP del visitante a servidores de Google sin base legal, lo que
     supone un problema de RGPD para una empresa europea. La fuente se
     autoalojará (self-hosted) desde assets/fonts/ en un paso posterior, con
     sus @font-face declarados en base.css.

     Hasta entonces solo está definida la variable: el stack de respaldo
     (fuentes de sistema) es lo que se verá mientras tanto. */
  --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Escala tipográfica (pendiente de identidad visual real) ----
  --font-heading: ;
  --font-body: ;

  --font-size-base: ;
  --font-size-sm: ;
  --font-size-lg: ;
  --font-size-h1: ;
  --font-size-h2: ;
  --font-size-h3: ;

  --line-height-base: ;
  --line-height-heading: ;

  --font-weight-normal: ;
  --font-weight-medium: ;
  --font-weight-bold: ;
  */

}