[sys-font="roboto"]{
    --google-normal: 'Roboto' !important;
    --google-mid: 'Roboto-medium' !important;
    --poppins: 'Roboto' !important;
    --outfit: 'Roboto' !important;
     --outfit-mid: 'Roboto-medium' !important;
    --Modal-Backdrop: rgb(0, 0, 0, 0.6);
    --md-list-item-label-text-size: 17px !important;

}


:root{
    --Primary: #b1d18a;
    --On-Primary: #1f3701;
    --Primary-Container: #354e16;
    --On-Primary-Container: #cdeda3;
    --Secondary: #bfcbad;
    --On-Secondary: #2a331e;
    --Secondary-Container: #404a33;
    --On-Secondary-Container: #dce7c8;
    --Tertiary: #a0d0cb;
    --On-Tertiary: #003735;
    --Tertiary-Container: #1f4e4b;
    --On-Tertiary-Container: #bcece7;
    --Error: #ffb4ab;
    --On-Error: #690005;
    --Error-Container: #93000a;
    --On-Error-Container: #ffdad6;
    --Surface-Dim: #12140e;
    --Surface: #12140e;
    --Surface-Bright: #383a32;
    --Surface-Container-Lowest: #0c0f09;
    --Surface-Container-Low: #1a1c16;
    --Surface-Container: #1e201a;
    --Surface-Container-High: #282b24;
    --Surface-Container-Highest: #33362e;
    --Inverse-Surface: #e2e3d8;
    --Inverse-On-Surface: #2f312a;
    --Inverse-Primary: #4c662b;
    --On-Surface: #e2e3d8;
    --On-Surface-Variant: #c5c8ba;
    --Outline: #8f9285;
    --Outline-Variant: #44483d;
    --Scrim: #000000;
    --Shadow: #000000;

    --caret: #b1d18a;
    --Top-bar: 64, 70, 89;



}


:root {
    --md-sys-color-primary: var(--Primary);
    --md-sys-color-on-primary: var(--On-Primary);
    --md-sys-color-primary-container: var(--Primary-Container);
    --md-sys-color-on-primary-container: var(--On-Primary-Container);
    --md-sys-color-secondary: var(--Secondary);
    --md-sys-color-on-secondary: var(--On-Secondary);
    --md-sys-color-secondary-container: var(--Secondary-Container);
    --md-sys-color-on-secondary-container: var(--On-Secondary-Container);
    --md-sys-color-tertiary: var(--Tertiary);
    --md-sys-color-on-tertiary: var(--On-Tertiary);
    --md-sys-color-tertiary-container: var(--Tertiary-Container);
    --md-sys-color-on-tertiary-container: var(--On-Tertiary-Container);
    --md-sys-color-error: var(--Error);
    --md-sys-color-on-error: var(--On-Error);
    --md-sys-color-error-container: var(--Error-Container);
    --md-sys-color-on-error-container: var(--On-Error-Container);
    --md-sys-color-background: var(--Surface);
    --md-sys-color-on-background: var(--On-Surface);
    --md-sys-color-surface: var(--Surface);
    --md-sys-color-on-surface: var(--On-Surface);
    --md-sys-color-surface-bright: var(--Surface-Bright);
    --md-sys-color-surface-dim: var(--Surface-Dim);
    --md-sys-color-surface-container: var(--Surface-Container);
    --md-sys-color-surface-container-lowest: var(--Surface-Container-Lowest);
    --md-sys-color-surface-container-low: var(--Surface-Container-Low);
    --md-sys-color-surface-container-high: var(--Surface-Container-High);
    --md-sys-color-surface-container-highest: var(--Surface-Container-Highest);
    --md-sys-color-outline: var(--Outline);
    --md-sys-color-outline-variant: var(--Outline-Variant);
    --md-sys-color-on-surface-variant: var(--On-Surface-Variant);
    --md-sys-color-on-background-variant: var(--On-Surface-Variant);
    --md-focus-ring-color: transparent;
    --md-ripple-pressed-opacity: 0.12;
    --md-ripple-hover-opacity: 0;
    --md-ripple-focus-opacity: 1;


    --my-brand-font: var(--outfit);
    --my-headline-font: var(--outfit);
    --my-title-font: var(--outfit);
    --my-plain-font: var(--outfit);

    --md-ref-typeface-brand: var(--outfit);
    --md-ref-typeface-plain: var(--outfit);

    --md-sys-typescale-headline-font: var(--outfit);
    --md-sys-typescale-title-font: var(--outfit);

    --md-icon-button-pressed-state-layer-opacity: 0.25;
    --md-fab-pressed-state-layer-opacity: 0.25;
}


:root {
    --md-switch-focus-handle-color: var(--Outline);
    --md-switch-selected-focus-handle-color: var(--On-Primary);
    --md-switch-selected-hover-handle-color: var(--On-Primary);
    --md-switch-selected-pressed-handle-color: var(--On-Primary);
    --md-switch-pressed-handle-color: var(--Outline);
    --md-switch-hover-handle-color: var(--Outline);
    --md-switch-selected-icon-color: var(--Primary);
    --md-switch-selected-hover-icon-color: var(--Primary);
    --md-switch-selected-focus-icon-color: var(--Primary);
    --md-switch-selected-pressed-icon-color: var(--Primary);
    --md-checkbox-hover-outline-color: var(--On-Surface-Variant);
    --md-checkbox-focus-outline-color: var(--On-Surface-Variant);
    --md-checkbox-pressed-outline-color: var(--On-Surface-Variant);
    --md-list-item-pressed-state-layer-opacity: 0.12;
    --md-list-item-pressed-state-layer-color: var(--On-Surface);

    --md-list-container-color: transparent;
    --md-menu-item-pressed-state-layer-opacity: 0.12;

    --md-filled-button-pressed-state-layer-opacity: 0.25;
    --md-outlined-button-pressed-state-layer-opacity: 0.25;

    --md-text-button-pressed-state-layer-opacity: 0.25;
    --md-filled-tonal-button-pressed-state-layer-opacity: 0.25;
    --md-elevated-button-pressed-state-layer-opacity: 0.25;

    --md-text-button-label-text-size: 1rem;;
    --md-filled-button-label-text-size: 1rem;;
    --md-outlined-button-label-text-size: 1rem;;
    --md-filled-tonal-button-label-text-size: 1rem;;
    --md-elevated-button-label-text-size: 1rem;


    --md-text-button-label-text-font: var(--google-mid);
    --md-filled-button-label-text-font: var(--google-mid);
    --md-outlined-button-label-text-font: var(--google-mid);
    --md-filled-tonal-button-label-text-font: var(--google-mid);
    --md-elevated-button-label-text-font: var(--google-mid);

    --md-filled-button-icon-size: 21px;
    --md-text-button-icon-size: 21px;
    --md-outlined-button-icon-size: 21px;
    --md-filled-tonal-button-icon-size: 21px;
    --md-elevated-button-icon-size: 21px;
}