/*==========================================================
    IMPACTA GAMES
    DESIGN SYSTEM

    TYPOGRAPHY
==========================================================*/

:root{

    --font-primary: "Manrope", sans-serif;

}



/*==========================================================
    BASE
==========================================================*/

body{

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

    font-weight:400;

}


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

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    color:var(--ig-text-title);

    font-weight:var(--ig-font-bold);

    line-height:1.1;

    letter-spacing:-0.03em;

}

h1{font-size:var(--ig-fs-h1);}
h2{font-size:var(--ig-fs-h2);}
h3{font-size:var(--ig-fs-h3);}
h4{font-size:var(--ig-fs-h4);}
h5{font-size:var(--ig-fs-h5);}
h6{font-size:var(--ig-fs-h6);}


/*==========================================================
    PARAGRAPHS
==========================================================*/

p{

    margin:0;

    color:var(--ig-text-body);

    line-height:var(--ig-line-height);

}


/*==========================================================
    LISTS
==========================================================*/

ul,
ol{

    margin:0;

    padding-left:1.5rem;

}

li{

    line-height:var(--ig-line-height);

}


/*==========================================================
    SMALL
==========================================================*/

small{

    font-size:var(--ig-fs-sm);

    color:var(--ig-text-muted);

}


/*==========================================================
    EMPHASIS
==========================================================*/

strong{

    font-weight:var(--ig-font-bold);

    color:var(--ig-text-title);

}

em{

    font-style:italic;

}

mark{

    padding:.1em .3em;

    border-radius:4px;

    background:rgba(24,184,255,.15);

    color:var(--ig-primary);

}


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

a{

    color:inherit;

    text-decoration:none;

    transition:

        color var(--ig-duration-fast)

        var(--ig-ease);

}

a:hover{

    color:var(--ig-primary);

}


/*==========================================================
    DISPLAY
==========================================================*/

.ig-display-xl{

    font-size:clamp(4rem,8vw,6rem);

    font-weight:var(--ig-font-black);

    line-height:1;

    letter-spacing:-0.05em;

    color:var(--ig-text-title);

}

.ig-display-lg{

    font-size:clamp(3rem,6vw,4.8rem);

    font-weight:var(--ig-font-black);

    line-height:1.05;

    letter-spacing:-0.04em;

    color:var(--ig-text-title);

}

.ig-display-md{

    font-size:clamp(2.5rem,5vw,3.8rem);

    font-weight:var(--ig-font-black);

    line-height:1.08;

    letter-spacing:-0.03em;

    color:var(--ig-text-title);

}


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

.ig-heading-xl{

    font-size:var(--ig-fs-h1);

    font-weight:var(--ig-font-black);

    line-height:1.05;

}

.ig-heading-lg{

    font-size:var(--ig-fs-h2);

    font-weight:var(--ig-font-black);

    line-height:1.1;

}

.ig-heading-md{

    font-size:var(--ig-fs-h3);

    font-weight:var(--ig-font-bold);

    line-height:1.15;

}

.ig-heading-sm{

    font-size:var(--ig-fs-h4);

    font-weight:var(--ig-font-bold);

    line-height:1.2;

}

.ig-heading-xs{

    font-size:var(--ig-fs-h5);

    font-weight:var(--ig-font-semibold);

    line-height:1.25;

}


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

.ig-body-xl{

    font-size:1.35rem;

    line-height:1.8;

}

.ig-body-lg{

    font-size:var(--ig-fs-lg);

    line-height:1.8;

}

.ig-body{

    font-size:var(--ig-fs-md);

    line-height:1.7;

}

.ig-body-sm{

    font-size:var(--ig-fs-sm);

    line-height:1.6;

}

.ig-body-xs{

    font-size:var(--ig-fs-xs);

    line-height:1.5;

}


/*==========================================================
    LABELS
==========================================================*/

.ig-label{

    display:inline-flex;

    align-items:center;

    gap:.5rem;

    font-size:var(--ig-fs-sm);

    font-weight:var(--ig-font-semibold);

    letter-spacing:.18em;

    text-transform:uppercase;

    color:var(--ig-primary);

}


/*==========================================================
    CAPTION
==========================================================*/

.ig-caption{

    font-size:var(--ig-fs-sm);

    color:var(--ig-text-muted);

}


/*==========================================================
    TEXT COLORS
==========================================================*/

.ig-text-primary{

    color:var(--ig-primary);

}

.ig-text-secondary{

    color:var(--ig-secondary);

}

.ig-text-accent{

    color:var(--ig-accent);

}

.ig-text-white{

    color:var(--ig-text-title);

}

.ig-text-body{

    color:var(--ig-text-body);

}

.ig-text-muted{

    color:var(--ig-text-muted);

}


/*==========================================================
    TEXT ALIGNMENT
==========================================================*/

.ig-text-left{

    text-align:left;

}

.ig-text-center{

    text-align:center;

}

.ig-text-right{

    text-align:right;

}

.ig-text-justify{

    text-align:justify;

}


/*==========================================================
    TEXT TRANSFORM
==========================================================*/

.ig-uppercase{

    text-transform:uppercase;

}

.ig-lowercase{

    text-transform:lowercase;

}

.ig-capitalize{

    text-transform:capitalize;

}


/*==========================================================
    FONT WEIGHT
==========================================================*/

.ig-light{

    font-weight:var(--ig-font-light);

}

.ig-regular{

    font-weight:var(--ig-font-regular);

}

.ig-medium{

    font-weight:var(--ig-font-medium);

}

.ig-semibold{

    font-weight:var(--ig-font-semibold);

}

.ig-bold{

    font-weight:var(--ig-font-bold);

}

.ig-black{

    font-weight:var(--ig-font-black);

}


/*==========================================================
    TEXT EFFECTS
==========================================================*/

.ig-highlight{

    color:var(--ig-primary);

}

.ig-gradient{

    background:

        linear-gradient(
            90deg,
            var(--ig-primary),
            var(--ig-accent)
        );

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

}

.ig-nowrap{

    white-space:nowrap;

}

.ig-balance{

    text-wrap:balance;

}