/* ==========================================================
   LAIREN AI

   CORE
   TYPOGRAPHY.CSS

   Sistema tipográfico global
========================================================== */


/*==========================================================
TIPOGRAFÍA BASE
==========================================================*/

:root{

    --font-family:
        "Inter",
        "Segoe UI",
        sans-serif;

    --text-xs:12px;
    --text-sm:14px;
    --text-md:16px;
    --text-lg:18px;
    --text-xl:22px;
    --text-2xl:28px;
    --text-3xl:36px;
    --text-4xl:48px;
    --text-5xl:64px;

}


/*==========================================================
BODY
==========================================================*/

body{

    font-family:var(--font-family);

    color:#F4F7FC;

    font-size:var(--text-md);

    line-height:1.6;

}


/*==========================================================
HEADINGS
==========================================================*/

h1{

    font-size:var(--text-5xl);

    font-weight:800;

    line-height:1.05;

}

h2{

    font-size:var(--text-3xl);

    font-weight:700;

    line-height:1.15;

}

h3{

    font-size:var(--text-xl);

    font-weight:700;

}

h4{

    font-size:var(--text-lg);

    font-weight:600;

}


/*==========================================================
SECCIONES
==========================================================*/

.section-title{

    font-size:var(--text-3xl);

    font-weight:700;

    letter-spacing:-0.02em;

}

.section-description{

    margin-top:8px;

    max-width:760px;

    color:#A8B4C8;

    font-size:var(--text-md);

}


/*==========================================================
BADGES
==========================================================*/

.section-tag{

    font-size:var(--text-xs);

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}


/*==========================================================
TARJETAS
==========================================================*/

.card-title{

    font-size:var(--text-xl);

    font-weight:700;

}

.card-subtitle{

    font-size:var(--text-sm);

    color:#98A7BE;

}

.card-value{

    font-size:var(--text-4xl);

    font-weight:800;

    line-height:1;

}


/*==========================================================
TABLAS
==========================================================*/

.table-title{

    font-size:var(--text-md);

    font-weight:700;

}

.table-value{

    font-size:var(--text-sm);

}


/*==========================================================
BOTONES
==========================================================*/

button{

    font-size:var(--text-sm);

    font-weight:600;

}


/*==========================================================
LINKS
==========================================================*/

a{

    text-decoration:none;

}


/*==========================================================
RESPONSIVE
==========================================================*/

@media (max-width:1024px){

    h1{

        font-size:var(--text-4xl);

    }

    h2{

        font-size:var(--text-2xl);

    }

}

@media (max-width:768px){

    :root{

        --text-3xl:30px;

        --text-4xl:40px;

        --text-5xl:48px;

    }

}