/* =========================================
   MORZO SocietyOS
   Typography System
========================================= */


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


body {

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

    font-weight: var(--font-weight-normal);

    color: var(--text-primary);

}



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


h1 {

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

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

    letter-spacing: -0.04em;

}



h2 {

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

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

    letter-spacing: -0.03em;

}



h3 {

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

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

}



h4 {

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

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

}



h5 {

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

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

}



h6 {

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

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

}





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


.hero-title {


    font-size:

    clamp(
        2.5rem,
        5vw,
        4rem
    );


    font-weight:

    var(--font-weight-bold);


    line-height:

    1.1;


    letter-spacing:

    -0.05em;


}



.hero-subtitle {


    max-width:

    700px;


    margin-top:

    var(--space-6);


    font-size:

    var(--font-size-lg);


    color:

    var(--text-secondary);


    line-height:

    1.7;


}




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


.section-title {


    font-size:

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


    margin-bottom:

    var(--space-4);


}



.section-description {


    max-width:

    var(--content-width);


    color:

    var(--text-secondary);


    font-size:

    var(--font-size-md);


}





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


.text-large {


    font-size:

    var(--font-size-lg);


}



.text-medium {


    font-size:

    var(--font-size-md);


}



.text-small {


    font-size:

    var(--font-size-sm);


}



.text-muted {


    color:

    var(--text-muted);


}





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


.dashboard-title {


    font-size:

    var(--font-size-xl);


    font-weight:

    var(--font-weight-bold);


}



.dashboard-subtitle {


    color:

    var(--text-secondary);


    font-size:

    var(--font-size-sm);


}




.widget-title {


    font-size:

    margin-top:12px;

    font-size:18px;

    font-weight:700;

    color:var(--morzo-primary);


}




.widget-value {


    margin-top:

    margin-top:10px;

    font-size:52px;

    font-weight:800;

    line-height:1;


}



.widget-description{

    margin-top:8px;

    font-size:15px;

    line-height:1.6;

    color:var(--text-secondary);

}





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


.label {


    display:

    inline-block;


    font-size:

    var(--font-size-xs);


    font-weight:

    var(--font-weight-semibold);


    text-transform:

    uppercase;


    letter-spacing:

    0.08em;


    color:

    var(--text-muted);


}





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


.btn-text {


    font-size:

    var(--font-size-sm);


    font-weight:

    var(--font-weight-semibold);


}





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


.link {


    color:

    var(--morzo-primary);


    font-weight:

    var(--font-weight-medium);


}



.link:hover {


    color:

    var(--morzo-primary-light);


}




/* =========================================
   QUOTES / HIGHLIGHTS
========================================= */


.highlight {


    color:

    var(--morzo-primary);


    font-weight:

    var(--font-weight-semibold);


}



.accent-text {


    color:

    var(--morzo-accent-dark);


}




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


@media (max-width: 768px) {


    h1 {

        font-size:

        2.25rem;

    }



    h2 {

        font-size:

        1.8rem;

    }



    .hero-title {


        font-size:

        2.5rem;


    }



    .hero-subtitle {


        font-size:

        var(--font-size-md);


    }



}




/* =========================================
   INFO WIDGET TYPOGRAPHY
========================================= */

.widget-info-title{

    margin-top:12px;

    font-size:22px;

    font-weight:700;

    color:var(--morzo-primary);

}

.widget-info-value{

    margin-top:10px;

    font-size:20px;

    font-weight:600;

    line-height:1.6;

    color:var(--text-primary);

    word-break:break-word;

}

.widget-info-description{

    margin-top:8px;

    font-size:15px;

    line-height:1.6;

    color:var(--text-secondary);

}