/* ==========================================================================
   VARIABLES GLOBALES
   --------------------------------------------------------------------------
   Este es el "panel de control" del diseño. Cambiando estos valores cambia
   toda la web. El resto de archivos CSS SOLO usan estas variables.
   ========================================================================== */

:root {

	/* ---------- COLORES ---------- */
	--color-primary:          #0f4c5c;  /* Azul petróleo (marca) */
	--color-primary-hover:    #0b3a47;  /* Más oscuro al pasar el ratón */
	--color-primary-contrast: #ffffff;  /* Texto sobre el principal */
	--color-secondary:        #2eb872;  /* Verde del check (acento) */
	--color-secondary-hover:  #25a063;  /* Verde al pasar el ratón */
	--color-secondary-contrast: #0b2e38;/* Texto sobre el verde */

	--color-text:           #1f3a42;  /* Texto general */
	--color-text-muted:     #5f7880;  /* Fechas, metas */
	--color-heading:        #0b2e38;  /* Títulos */

	--color-bg:             #ffffff;
	--color-bg-alt:         #f1f7f8;  /* Fondo alternativo con toque azulado */
	--color-border:         #dbe6e9;

	--color-header-bg:      var(--color-bg);
	--color-header-text:    var(--color-heading);
	--color-footer-bg:      #0b3a47;
	--color-footer-text:    #cfe3e7;

	--color-success:        #15803d;
	--color-error:          #b91c1c;
	--color-focus:          var(--color-secondary);

	/* ---------- TIPOGRAFÍAS ----------
	   Para usar una Google Font, cárgala (por ejemplo en functions.php) y
	   pon su nombre delante en la pila correspondiente. */
	--font-body:    "Inter", system-ui, sans-serif;
	--font-heading: "Poppins", var(--font-body);
	--font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--font-weight-normal: 400;
	--font-weight-bold:   700;

	--line-height-body:    1.65;
	--line-height-heading: 1.2;

	/* ---------- TAMAÑOS DE FUENTE ----------
	   Escala tipográfica. --fs-base es el tamaño del texto normal.
	   clamp() hace que los títulos crezcan suavemente con el ancho de pantalla. */
	--fs-xs:   0.8125rem;  /* 13px */
	--fs-sm:   0.875rem;   /* 14px */
	--fs-base: 1rem;       /* 16px */
	--fs-md:   1.125rem;   /* 18px */
	--fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--fs-xl:   clamp(1.5rem, 1.25rem + 1vw, 2rem);
	--fs-2xl:  clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);

	/* ---------- ESPACIADOS ----------
	   Escala de márgenes y rellenos. Úsala siempre en vez de valores sueltos. */
	--space-1: 0.25rem;  /*  4px */
	--space-2: 0.5rem;   /*  8px */
	--space-3: 0.75rem;  /* 12px */
	--space-4: 1rem;     /* 16px */
	--space-5: 1.5rem;   /* 24px */
	--space-6: 2rem;     /* 32px */
	--space-7: 3rem;     /* 48px */
	--space-8: 4rem;     /* 64px */

	--gutter: var(--space-4);       /* Margen lateral del contenedor en móvil */
	--section-gap: var(--space-7);  /* Separación vertical entre bloques grandes */

	/* ---------- ANCHOS ---------- */
	--container-width: 1200px;  /* Ancho máximo de la web */
	--content-width:   760px;   /* Ancho de lectura (páginas y entradas) */
	--sidebar-width:   300px;   /* Ancho de la barra lateral en escritorio */
	--header-height:   64px;    /* Alto mínimo de la cabecera */

	/* ---------- RADIOS (esquinas redondeadas) ---------- */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-full: 999px;

	/* ---------- SOMBRAS ---------- */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

	/* ---------- TRANSICIONES ---------- */
	--transition: 0.2s ease;

	/* ---------- BREAKPOINTS (referencia) ----------
	   OJO: las variables CSS NO funcionan dentro de @media.
	   Estos valores son solo de referencia; si los cambias, cámbialos
	   también a mano en responsive.css y header.css (busca "48em" / "64em").
	     --bp-tablet:  48em  (768px)
	     --bp-desktop: 64em  (1024px) */
	--bp-tablet:  48em;
	--bp-desktop: 64em;
}