@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

:root {
	--primary-font: 'Inter', sans-serif;

	/* Color Palette */
	--p1:  #061a2d;
	--p2:  #0a1f33;
	--p3:  #0e243a;
	--p4:  #122a41;
	--p5:  #163048;
	--p6:  #1b364f;
	--p7:  #203c57;
	--p8:  #25425f;
	--p9:  #2f4e6c;
	--p10: #bfc3cc;
	--p11: #e6e8ee;
	--p12: #06a2e0;
	--p13: #04b8f1;
	--p14: #0b80de;
	--p15: #041424;

	/* Links */
	--link-color: var(--p11);
	--link-color-hover: #ffffff;
	--post-link-color: var(--p13);
	--post-link-color-hover: var(--p12);

	/* Font Sizes (escala basada en 10px/rem) */
	--fs-h1: clamp(2.8rem, 4vw + 1rem, 4.8rem);   /* 28–48px */
	--fs-h2: clamp(2.4rem, 3vw + 1rem, 3.2rem);   /* 24–32px */
	--fs-h3: clamp(2rem, 2.5vw + .75rem, 2.8rem); /* 20–28px */
	--fs-h4: clamp(1.8rem, 2vw + .5rem, 2.4rem);  /* 18–24px */
	--fs-h5: clamp(1.6rem, 2vw + .2rem, 1.8rem);  /*16-18px*/
	--fs-h6: clamp(1.6rem, 1.5vw + .25rem, 2rem); /* 16–20px */
	--fs-h7: clamp(1.4rem, 1vw + .25rem, 1.6rem); /* 14–16px */
	

	--fs-body: clamp(1.6rem, 1vw + 0.25rem, 1.8rem); /* 16–18px */
	--fs-small: clamp(1.2rem, 0.5vw + 0.25rem, 1.4rem); /* 12–14px */

	/* Spacing (basado en múltiplos de 8px) */
	--space-0: 0;
	--space-1: 0.8rem;    /* 8px */
	--space-2: 1.6rem;    /* 16px */
	--space-3: clamp(1.6rem, 1vw + 0.5rem, 2.4rem);  /* 16–24px */
	--space-4: clamp(2rem, 1.5vw + 0.5rem, 3.2rem);  /* 20–32px */
	--space-5: clamp(2.4rem, 2vw + 0.5rem, 4rem);    /* 24–40px */
	--space-6: clamp(2.8rem, 2.5vw + 0.5rem, 4.8rem);/* 28–48px */
	--space-7: clamp(3.2rem, 3vw + 0.5rem, 5.6rem);  /* 32–56px */
	--space-8: clamp(3.6rem, 3.5vw + 0.5rem, 6.4rem);/* 36–64px */

	/* Layout */
	--container-max-width: 120rem;
	--container-padding: var(--space-2);
}