/********************* 
 * Z5 Basic Vars 
 *********************/
:root {
    /* Layout */
    --section-block-padding: clamp(5rem, 4.78vw + 3.47rem, 10rem);
    --section-inline-padding: clamp(2.4rem, 3.442vw + 1.299rem, 6rem);

    /* Typography */
    --h1: 60rem;
    --h2: 48rem;
    --h3: 38rem;
    --h4: 30rem;
    --h5: 24rem;
    --p: 16rem;
    
    --text-xs: 10rem;
    --text-s: 16rem;
    --text-m: 20rem;
    --text-l: 24rem;
    --text-xl: 32rem;

    /* Gaps & Spacing */
    --container-gap: clamp(4rem, 1.912vw + 3.388rem, 6rem);
    --grid-gap: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --content-gap: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --space-m: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --card-padding: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);

    /* Grid */
    --grid-1: repeat(1, minmax(0, 1fr));
    --grid-2: repeat(2, minmax(0, 1fr));
    --grid-3: repeat(3, minmax(0, 1fr));
    --grid-4: repeat(4, minmax(0, 1fr));
    --grid-5: repeat(5, minmax(0, 1fr));

    /* Radius */
    --radius-s: .6rem;
    --radius-m: 1rem;
    --radius-l: 1.6rem;
    --radius: 5rem;

}




/********************* 
 * Z5 Utility Classes 
 *********************/

/* Background Colors */
.z5-bg--primary { background-color: var(--primary);}
.z5-bg--secondary {background-color: var(--secondary)}
.z5-bg--tertiary {background-color: var(--tertiary)}
.z5-bg--action {background-color: var(--action)}
.z5-bg--base {background-color: var(--base)}


/* Text Colors */
.z5-text--primary {color: var(--primary);}
.z5-text--secondary {color: var(--secondary);}
.z5-text--tertiary {color: var(--tertiary);}
.z5-text--action {color: var(--action);}
.z5-text--base {color: var(--base);}


/* Text Size */
.z5-text--xs {font-size: var(--text-xs)}
.z5-text--s {font-size: var(--text-s)}
.z5-text--m {font-size: var(--text-m)}
.z5-text--l {font-size: var(--text-l)}
.z5-text--xl {font-size: var(--text-xl)}


/* Text Align */
.z5-text--center {text-align: center;}
.z5-text--left {text-align: left;}
.z5-text--right {text-align: right;}

/* Object Align */
.z5-align--center {align-items: center;}
.z5-justify--center {justify-content: center;}
.z5-align-self--center {align-self: center !important;}

/* Grid Layouts */