/* ==========================================================================
   Fluxoweby
   Typography
   Version: 1.0
   ========================================================================== */

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

body{

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

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

    font-weight:400;

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

    color:var(--color-text);

    background:var(--color-background);

}

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

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

    color:var(--color-text);

    font-weight:700;

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

    letter-spacing:-0.02em;

}

h1{

    font-size:var(--font-size-hero);

    font-weight:800;

}

h2{

    font-size:clamp(2rem,5vw,3rem);

}

h3{

    font-size:1.75rem;

}

h4{

    font-size:1.375rem;

}

h5{

    font-size:1.125rem;

}

h6{

    font-size:1rem;

}

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

p{

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

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

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

}

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

a{

    color:inherit;

    transition:color var(--transition);

}

a:hover{

    color:var(--color-primary);

}

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

small{

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

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

}

/* ==========================================================================
   STRONG
   ========================================================================== */

strong{

    font-weight:700;

}

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

em{

    font-style:italic;

}

/* ==========================================================================
   CODE
   ========================================================================== */

code{

    font-family:

        Consolas,
        Monaco,
        monospace;

    font-size:.95em;

}

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

ul,
ol{

    padding:0;

    margin:0;

}

li{

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

}

/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

blockquote{

    border-left:4px solid var(--color-primary);

    padding-left:var(--space-6);

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

    font-style:italic;

}

/* ==========================================================================
   SECTION TAG
   ========================================================================== */

.section-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:var(--space-2);

    padding:

        var(--space-2)

        var(--space-4);

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

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    border-radius:var(--radius-pill);

    color:var(--color-primary-300);

}

/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.section-header{

    max-width:720px;

    margin-inline:auto;

    margin-bottom:var(--space-16);

    text-align:center;

}

.section-header h2{

    margin-top:var(--space-4);

    margin-bottom:var(--space-5);

}

.section-header p{

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

}

/* ==========================================================================
   HERO
   ========================================================================== */

.hero h1{

    max-width:12ch;

}

.hero p{

    max-width:620px;

    font-size:1.125rem;

}

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

.button{

    font-weight:600;

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

    letter-spacing:.02em;

}

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

.price{

    display:flex;

    align-items:flex-end;

    gap:6px;

    font-size:3rem;

    font-weight:800;

    line-height:1;

}

.price small{

    margin-bottom:8px;

}

/* ==========================================================================
   STATISTICS
   ========================================================================== */

.stat-card strong{

    display:block;

    font-size:3rem;

    font-weight:800;

    line-height:1;

    color:var(--color-text);

}

.stat-card span{

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

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

}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.site-footer h3{

    font-size:1rem;

    margin-bottom:var(--space-5);

}

.site-footer p,
.site-footer li,
.site-footer a{

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

}

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

@media (max-width:768px){

    h2{

        font-size:2rem;

    }

    h3{

        font-size:1.5rem;

    }

    .hero p{

        font-size:1rem;

    }

    .section-header{

        margin-bottom:var(--space-12);

    }

}