@font-face {
font-family: 'Inter';
src: url('../fonts/intervariable.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

/* ============================
   DESIGN TOKENS
============================ */

:root{

/* CONTAINER */
--container-width:1200px;
--container-narrow:900px;

/* SPACING SYSTEM */
--space-xs:4px;
--space-sm:8px;
--space-md:16px;
--space-lg:32px;
--space-xl:64px;

/* BORDER RADIUS */
--radius-sm:6px;
--radius-md:12px;
--radius-lg:30px;
--radius-xl:50px;
--radius-xxl:100px;

/* COLORS */
--color-primario:#4e73b9;
--color-primario-oscuro:#3c5aa0;

--color-primario-anaranjado:#F19123;
--color-primario-anaranjado-oscuro:#d97a1c;

--color-text-negro:#363636;
--color-text-cafe:#695A55;
--color-text-azul:#576186;
--color-text-blanco:#ffffff;

--color-rojo:#FD7171;
--color-blanco:#ffffff;

--color-bg:#ebedff;
--color-bg-soft:#f7f8fa;

/* TYPOGRAPHY */
--font-main:'Inter', system-ui, -apple-system, sans-serif;

--text-sm:14px;
--text-base:16px;
--text-md:18px;
--text-lg:24px;
--text-xl:30px;
--text-xxl:40px;

--font-light:300;
--font-regular:400;
--font-medium:500;
--font-semibold:600;
--font-bold:700;


}

/* ============================
   BASE
============================ */
img{
max-width:100%;
height:auto;
display:block;
}

body{
font-family:var(--font-main);
font-size:var(--text-base);
color:var(--color-text-negro);
background:var(--color-bg);
line-height:1.5;
}

h1{
font-size:var(--text-xl);
font-weight:var(--font-bold);
}

h2{
font-size:var(--text-lg);
font-weight:var(--font-semibold);
}

h3{
font-size:var(--text-md);
font-weight:var(--font-medium);
}

p{
margin-bottom:var(--space-md);
font-weight:var(--font-regular);

}