/**
 * ==========================================================
 * GM DESIGN SYSTEM
 * File: typography.css
 * Description: Semantic Typography System
 *
 * Depends:
 * tokens.css
 *
 * Version:
 * 2.0.1
 *
 * Last Update:
 * 16.08.2026
 * ==========================================================
 */

:root{

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

    --gm-display-xl:var(--gm-font-size-3xl);

    --gm-display-lg:2.9rem;

    --gm-display-md:2.4rem;


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

    --gm-heading-xl:2.2rem;

    --gm-heading-lg:1.75rem;

    --gm-heading-md:1.35rem;

    --gm-heading-sm:1.15rem;


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

    --gm-body-lg:1.125rem;

    --gm-body-md:var(--gm-font-size-md);

    --gm-body-sm:var(--gm-font-size-sm);

    --gm-caption:var(--gm-font-size-xs);

}


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

.gm-display-xl{

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

    font-size:var(--gm-display-xl);

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

    line-height:var(--gm-line-height-tight);

    letter-spacing:-.04em;

}

.gm-display-lg{

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

    font-size:var(--gm-display-lg);

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

    line-height:var(--gm-line-height-tight);

    letter-spacing:-.04em;

}

.gm-display-md{

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

    font-size:var(--gm-display-md);

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

    line-height:var(--gm-line-height-tight);

}


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

.gm-h1{

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

    font-size:var(--gm-heading-xl);

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

    line-height:var(--gm-line-height-tight);

}

.gm-h2{

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

    font-size:var(--gm-heading-lg);

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

    line-height:var(--gm-line-height-tight);

}

.gm-h3{

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

    font-size:var(--gm-heading-md);

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

    line-height:var(--gm-line-height-tight);

}

.gm-h4{

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

    font-size:var(--gm-heading-sm);

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

    line-height:var(--gm-line-height-normal);

}


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

.gm-body{

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

    font-size:var(--gm-body-md);

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

    line-height:var(--gm-line-height-normal);

    color:var(--gm-color-text);

}

.gm-body-lg{

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

    font-size:var(--gm-body-lg);

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

    line-height:var(--gm-line-height-normal);

}


/* ==========================================================
   BODY — SMALL
========================================================== */

.gm-body-sm,
.gm-small{

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

    font-size:var(--gm-body-sm);

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

    line-height:var(--gm-line-height-normal);

    color:var(--gm-color-text-light);

}


/* ==========================================================
   LABEL
========================================================== */

.gm-label{

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

    font-size:var(--gm-body-sm);

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

    line-height:1.4;

}


/* ==========================================================
   BUTTON
========================================================== */

.gm-button-text{

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

    font-size:var(--gm-body-md);

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

    letter-spacing:.02em;

}


/* ==========================================================
   PRICE
========================================================== */

.gm-price{

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

    font-size:2rem;

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

    line-height:1;

}

.gm-price-small{

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

    font-size:var(--gm-body-lg);

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

}


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

.gm-caption{

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

    font-size:var(--gm-caption);

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

    line-height:1.5;

    color:var(--gm-color-text-light);

}


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

@media (max-width:768px){

    .gm-display-xl{

        font-size:2.5rem;

    }

    .gm-display-lg{

        font-size:2.2rem;

    }

    .gm-display-md{

        font-size:2rem;

    }

    .gm-h1{

        font-size:1.9rem;

    }

    .gm-h2{

        font-size:1.55rem;

    }

    .gm-h3{

        font-size:1.25rem;

    }

}