/* --------------------------------- ROOT ---------------------------------*/

/* COLOR VARIABLES*/
:root {
    /** PRIMARY COLOR **/
    --primary:  rgba(81, 104, 53, 1);
    --on-primary: rgba(255, 255, 255, 1);
    --on-primary-variant: rgba(153, 180, 126, 1);

    /** SECONDARY COLOR **/
    --secondary: rgba(222, 110, 49, 1);
    --on-secondary: rgba(244, 210, 180, 1);

    /** SURFACE & ON SURFACE **/
    --surface: rgba(236, 241, 231, 1);
    --surface-dim: rgba(209, 221, 197, 1);
    --surf-cont: rgba(250, 250, 250, 1);
    --surf-cont-high: rgba(245, 245, 245, 1);
    --surf-cont-highest: rgba(236, 239, 241, 1);
    --on-surf-cont: rgba(55, 71, 79, 1);
    --on-surf-cont-variant: rgba(55, 71, 79, 1);

    /** OUTLINE **/
    --outline: rgba(158, 158, 158, 1);
    --outline-variant: rgba(224, 224, 224, 1);
    --outline-input-field: rgba(207, 216, 220, 1);
    --divider-primary: rgba(180, 200, 161, 1);
    --divider-neutral: rgba(224, 224, 224, 1);

    /** LIGHT PRIMARY BUTTON **/
    --light-primary-filled-enabled: rgba(81, 104, 53, 1);
    --light-primary-filled-hovered: rgba(106, 137, 69, 1);
    --primary-outlined-enabled-stroke: rgba(180, 200, 161, 1);
    --light-primary-outlined-enabled-fill: rgba(209, 221, 197, 0.5);
    --light-primary-outlined-hovered-fill: rgba(209, 221, 197, 1);
    --light-primary-tonal-enabled: rgba(153, 180, 126, 1);
    --light-primary-tonal-hovered: rgba(209, 221, 197, 1);

    /** DARK PRIMARY BUTTON **/
    --dark-primary-filled-enabled: rgba(236, 241, 231, 1);
    --dark-primary-filled-hovered: rgba(209, 221, 197, 1);
    --dark-primary-outlined-stroke: rgba(236, 241, 231, 1);
    --dark-primary-outlined-enabled-fill: rgba(236, 241, 231, 0);
    --dark-primary-outlined-hovered-fill: rgba(236, 241, 231, 0.2);

    /** SECONDARY BUTTON **/
    --secondary-filled-enabled: rgba(244, 210, 180, 1);
    --secondary-filled-hovered: rgba(237, 180, 132, 1);

    /** INPUT **/
    --input-fill-enabled: rgba(236, 239, 241, 0);
    --input-fill-active: rgba(236, 239, 241, 0);
    --input-fill-static: rgba(236, 239, 241, 1);
    --input-stroke-enabled: rgba(207, 216, 220, 1);
    --input-stroke-active: rgba(55, 71, 79, 1);


/* BORDER */

    /** BORDER STYLE **/
    --mobile-input-stroke-enabled: 1.25px solid rgba(207, 216, 220, 1);
    --mobile-input-stroke-active: 1.25px solid rgba(55, 71, 79, 1);
    --desktop-input-stroke-enabled: 2px solid rgba(207, 216, 220, 1);
    --desktop-input-stroke-enabled: 2px solid rgba(55, 71, 79, 1);
    --mobile-addmedia-stroke: 1.5px dashed rgba(207, 216, 220, 1);

    /** BORDER RADIUS **/
    --border-radius-small: 0.5rem;
    --border-radius-medium: 0.75rem;
    --border-radius-large: 1rem;
    --border-radius-full: 50%;


/* GAP & SPACING */

    /** GAP **/
    --spacing-xxs: 0.25rem;
    --spacing-xs: 0.5rem;
    --spacing-s: 0.75rem;
    --spacing-m: 1rem;
    --spacing-l: 1.25rem;
    --spacing-xl: 1.5rem;
    --spacing-xxl: 2rem;

    /** PADDING BUTTON **/
    --padding-button-small-text: 0.5rem 1rem 0.5rem 1rem;
    --padding-button-small-mixed: 0.5rem 1rem 0.5rem 0.5rem;
    --padding-button-large-text: 0.75rem 1.5rem 0.75rem 1.5rem;
    --padding-button-large-mix: 0.75rem 1rem 0.75rem 1.5rem;

    /** PADDING CHIPS **/
    --padding-chips-small-text: 0.25rem 0.5rem 0.25rem 0.5rem;
    --padding-chips-small-mixed: 0.25rem 0.5rem 0.25rem 0.25rem;
    --padding-chips-large-text: 0.375rem 0.75rem 0.375rem 0.75rem;
    --padding-chips-large-mixed: 0.375rem 0.75rem 0.375rem 0.375rem;

}


/* --------------------------------- Medium Divider ---------------------------------*/
/* TYPOGRAPHY */
/** TYPOGRAPHY COLOR **/
.primary {
    color: var(--primary);
}

.on-primary {
    color: var(--on-primary);
}

.on-primary-variant {
    color: var(--on-primary-variant);
}

.on-surf-cont {
    color: var(--on-surf-cont);
}

.on-surf-cont-variant {
    color: var(--on-surf-cont-variant);
}

.secondary {
    color: var(--secondary);
}

.surface {
    color: var(--surface);
}


/** TYPOGRAPHY STYLE **/
/*** DISPLAY ***/
#display-large {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 3.75rem;
    /* 60px */
    line-height: 4.875rem;
    /* 78px */
    letter-spacing: 0.0025rem;
    /* 0.25% */
    display: inline-block;
}

#display-medium {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 2.75rem;
    /* 44px */
    line-height: 3.5rem;
    /* 56px */
    letter-spacing: 0rem;
    /* 0% */
    display: inline-block;
}

#display-small {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    /* 36px */
    line-height: 3rem;
    /* 48px */
    letter-spacing: 0rem;
    /* 0% */
    display: inline-block;
}

/*** TITLE ***/
#title-extra-large {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 2rem;
    /* 32px */
    line-height: 2.5rem;
    /* 40px */
    letter-spacing: 0rem;
    /* 0% */
    display: inline-block;
}

#title-large {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 1.75rem;
    /* 28px */
    line-height: 2.25rem;
    /* 36px */
    letter-spacing: 0rem;
    /* 0% */
    display: inline-block;
}

#title-medium {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    /* 24px */
    line-height: 2rem;
    /* 32px */
    letter-spacing: 0rem;
    /* 0% */
    display: inline-block;
}

#title-small {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    /* 20px */
    line-height: 1.75rem;
    /* 28px */
    letter-spacing: 0rem;
    /* 0% */
    display: inline-block;
}

#title-extra-small {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    /* 16px */
    line-height: 1.5rem;
    /* 24px */
    letter-spacing: 0.0015rem;
    /* 0.15% */
    display: inline-block;
}

/*** BUTTON ***/
#button-large {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    /* 24px */
    line-height: 1.75rem;
    /* 28px */
    letter-spacing: 0rem;
    /* 0% */
    display: inline-block;
}

#button-medium {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    /* 20px */
    line-height: 1.5rem;
    /* 24px */
    letter-spacing: 0rem;
    /* 0% */
    display: inline-block;
}

#button-small {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    /* 16px */
    line-height: 1.25rem;
    /* 20px */
    letter-spacing: 0.0015rem;
    /* 0.15% */
    display: inline-block;
}

/*** BODY ***/
#body-large {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-size: 1rem;
    /* 16px */
    line-height: 1.5rem;
    /* 24px */
    letter-spacing: 0.0025rem;
    /* 0.25% */
    display: inline-block;
}

#body-medium {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.25rem;
    /* 20px */
    letter-spacing: 0.005rem;
    /* 0.5% */
    display: inline-block;
}

#body-small {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    /* 12px */
    line-height: 1rem;
    /* 16px */
    letter-spacing: 0.005rem;
    /* 0.5% */
    display: inline-block;
}

/*** LABEL ***/
#label-large {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.25rem;
    /* 20px */
    letter-spacing: 0.0015rem;
    /* 0.15% */
    display: inline-block;
}

#label-medium {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    /* 12px */
    line-height: 1rem;
    /* 16px */
    letter-spacing: 0.0025rem;
    /* 0.25% */
    display: inline-block;
}

#label-small {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    font-size: 0.625rem;
    /* 10px */
    line-height: 0.75rem;
    /* 12px */
    letter-spacing: 0.0025rem;
    /* 0.25% */
    display: inline-block;
}