:root {

    /* ============ Color ============ */
    --vp--color--primary: gray;
    --vp--color--secondary: green;
    --vp--color--accent: color-mix(in srgb, var(--vp--color--primary) 30%, var(--vp--color--secondary) 30%);

    /* Primary */
    --vp--color--on-primary: #FFFFFF;
    --vp--color--primary-container: color-mix(in srgb, var(--vp--color--primary) 80%, white 20%);
    --vp--color--on-primary-container: color-mix(in srgb, var(--vp--color--primary-container) 80%, black 20%);
    --vp--color--primary-lighter: color-mix(in srgb, var(--vp--color--primary) 30%, white 100%);
    --vp--color--primary-darker: color-mix(in srgb, var(--vp--color--primary) 80%, black 20%);

    /* Secondary */
    --vp--color--on-secondary: #FFFFFF;
    --vp--color--secondary-container: color-mix(in srgb, var(--vp--color--secondary) 80%, white 20%);
    --vp--color--on-secondary-container: color-mix(in srgb, var(--vp--color--secondary-container) 80%, black 20%);

    /* Accent */
    /* --vp--color--accent: #e4913c; */
    --vp--color--accent-lighter: color-mix(in srgb, var(--vp--color--accent) 80%, white 20%);
    --vp--color--accent-darker: color-mix(in srgb, var(--vp--color--accent) 80%, black 20%);
    --vp--color--accent-on: color-mix(in srgb, var(--vp--color--accent) 90%, white 10%);

    /* Surface and background */
    --vp--color--surface: #FFF8F7;
    --vp--color--on-surface: #201A19;

    /* ------------ Outline ------------ */
    --vp--color--outline: #857370;
    --vp--color--outline-variant: #D8C2BF;

    /* ------------ Background ------------ */
    --vp--color--background: #FFFBFF;
    --vp--color--on-background: #201A19;

    /* ------------ Text ------------ */
    /* ------------ Font ------------ */
    --vp--text--main-font: 'Inter', sans-serif;
    --vp-typography--font-family: "Inter", sans-serif;

    /* ============ Layout ============ */
    --vp-layout--container-max-width: 1120px;
    --vp-layout--container-padding-x: 20px;


    /* ============ Typography ============ */


    /* H1 */
    --vp-typography--h1-font-size: 64px;
    --vp-typography--h1-line-height: 78px;
    --vp-typography--h1-font-weight: 700;

    /* H2 */
    --vp-typography--h2-font-size: 48px;
    --vp-typography--h2-line-height: 54px;
    --vp-typography--h2-font-weight: 700;

    /* H3 */
    --vp-typography--h3-font-size: 32px;
    --vp-typography--h3-line-height: 40px;
    --vp-typography--h3-font-weight: 700;

    /* H4 */
    --vp-typography--h4-font-size: 28px;
    --vp-typography--h4-line-height: 34px;
    --vp-typography--h4-font-weight: 700;

    /* H5 */
    --vp-typography--h5-font-size: 24px;
    --vp-typography--h5-line-height: 28px;
    --vp-typography--h5-font-weight: 700;

    /* H6 */
    --vp-typography--h6-font-size: 20px;
    --vp-typography--h6-line-height: 24px;
    --vp-typography--h6-font-weight: 700;

    /* Quote */
    --vp-typography--quote-font-size: 24px;
    --vp-typography--quote-line-height: 28px;
    --vp-typography--quote-font-weight: 400;

    /* subtext */
    --vp-typography--subtext-font-size: 12px;
    --vp-typography--subtext-line-height: 20px;
    --vp-typography--subtext-weight: 400;
    --vp-typography--subtext-font-family: var(--vp-typography--font-family);
    --vp-typography--subtext-font-style: italic; 

    /* ------------ Body ------------ */
    /* Body-L */
    --vp-typography--body-l-font-size: 20px;
    --vp-typography--body-l-line-height: 28px;
    --vp-typography--body-l-weight: 400;
    --vp-typography--body-l-font-family: var(--vp-typography--font-family);

    /* Body-M */
    --vp-typography--body-m-font-size: 18px;
    --vp-typography--body-m-line-height: 24px;
    --vp-typography--body-m-weight: 400;
    --vp-typography--body-m-font-family: var(--vp-typography--font-family);

    /* Body-S */
    --vp-typography--body-s-font-size: 16px;
    --vp-typography--body-s-line-height: 20px;
    --vp-typography--body-s-weight: 400;
    --vp-typography--body-s-font-family: var(--vp-typography--font-family);

    /* ------------ Button ------------ */
    /* Button-L */
    --vp-typography--button-l-font-size: 20px;
    --vp-typography--button-l-line-height: 28px;
    --vp-typography--button-l-weight-bold: 700;
    --vp-typography--button-l-font-family: var(--vp-typography--font-family);

    /* Button-S */
    --vp-typography--button-s-font-size: 16px;
    --vp-typography--button-s-line-height: 18px;
    --vp-typography--button-s-weight-bold: 700;
    --vp-typography--button-s-font-family: var(--vp-typography--font-family);

    
}

/* ============ Typography ============ */

.h1, .h2, .h3, .h4, .h5, .h6, .quote, .body-l, .body-m, .body-s {
    font-family: var(--vp-typography--font-family);
    color: var(--vp-color--text-primary);
}

.h1 {
    font-size: var(--vp-typography--h1-font-size);
    line-height: var(--vp-typography--h1-line-height);
    font-weight: var(--vp-typography--h1-font-weight);
    margin: 0;
}

.h2 {
    font-size: var(--vp-typography--h2-font-size);
    line-height: var(--vp-typography--h2-line-height);
    font-weight: var(--vp-typography--h2-font-weight);
    margin: 0;
}

.h3 {
    font-size: var(--vp-typography--h3-font-size);
    line-height: var(--vp-typography--h3-line-height);
    font-weight: var(--vp-typography--h3-font-weight);
    margin: 0;
}

.h4 {
    font-size: var(--vp-typography--h4-font-size);
    line-height: var(--vp-typography--h4-line-height);
    font-weight: var(--vp-typography--h4-font-weight);
    margin: 0;
}

.h5 {
    font-size: var(--vp-typography--h5-font-size);
    line-height: var(--vp-typography--h5-line-height);
    font-weight: var(--vp-typography--h5-font-weight);
    margin: 0;
}

.h6 {
    font-size: var(--vp-typography--h6-font-size);
    line-height: var(--vp-typography--h6-line-height);
    font-weight: var(--vp-typography--h6-font-weight);
    margin: 0;
}

.quote {
    font-size: var(--vp-typography--quote-font-size);
    line-height: var(--vp-typography--quote-line-height);
    font-weight: var(--vp-typography--quote-font-weight);
    margin: 0;
}

.nav-1 {
    font-size: var(--vp-typography--nav-1-font-size);
    line-height: var(--vp-typography--nav-1-line-height);
    font-weight: var(--vp-typography--nav-1-weight);
    font-family: var(--vp-typography--nav-1-font-family);
    margin: 0;
}

.nav-2 {
    font-size: var(--vp-typography--nav-2-font-size);
    line-height: var(--vp-typography--nav-2-line-height);
    font-weight: var(--vp-typography--nav-2-weight);
    font-family: var(--vp-typography--nav-2-font-family);
    margin: 0;
}

.body-l {
    font-size: var(--vp-typography--body-l-font-size);
    line-height: var(--vp-typography--body-l-line-height);
    font-weight: var(--vp-typography--body-l-weight);
    font-family: var(--vp-typography--body-l-font-family);
}

.body-m {
    font-size: var(--vp-typography--body-m-font-size);
    line-height: var(--vp-typography--body-m-line-height);
    font-weight: var(--vp-typography--body-m-weight);
    font-family: var(--vp-typography--body-m-font-family);
}

.body-s {
    font-size: var(--vp-typography--body-s-font-size);
    line-height: var(--vp-typography--body-s-line-height);
    font-weight: var(--vp-typography--body-s-weight);
    font-family: var(--vp-typography--body-s-font-family);
}

.subtext {
    font-size: var(--vp-typography--subtext-font-size);
    line-height: var(--vp-typography--subtext-line-height);
    font-weight: var(--vp-typography--subtext-weight);
    font-family: var(--vp-typography--subtext-font-family);
    font-style: var(--vp-typography--subtext-font-style); /* Add this line */
}

/* ------------ Typography Button ------------ */

.button-l {
    font-size: var(--vp-typography--button-l-font-size);
    line-height: var(--vp-typography--button-l-line-height);
    font-weight: var(--vp-typography--button-l-weight-bold);
    font-family: var(--vp-typography--button-l-font-family);
}

.button-s {
    font-size: var(--vp-typography--button-s-font-size);
    line-height: var(--vp-typography--button-s-line-height);
    font-weight: var(--vp-typography--button-s-weight-bold);
    font-family: var(--vp-typography--button-s-font-family);
}