:root {
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;


    --color-white: #ffffff;
    --color-black: #000000;
    --color-transparent: transparent;


    --mix-light: var(--color-white);
    --mix-dark: var(--color-black);


    --content-on-white: var(--text-color-dark);
    --content-on-black: var(--text-color-light);


    --hover-defaut: color-mix(in srgb, var(--text-color) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-primary: color-mix(in srgb, var(--color-primary) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-secondary: color-mix(in srgb, var(--color-secondary) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-tertiary: color-mix(in srgb, var(--color-tertiary) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-dark: color-mix(in srgb, var(--color-dark) var(--state-hover-mix), var(--mix-light) var(--state-hover-mix-rest));
    --hover-danger: color-mix(in srgb, var(--color-danger) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-info: color-mix(in srgb, var(--color-info) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-light: color-mix(in srgb, var(--color-light) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-neutral: color-mix(in srgb, var(--color-neutral) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-success: color-mix(in srgb, var(--color-success) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-warning: color-mix(in srgb, var(--color-warning) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-white: color-mix(in srgb, var(--color-white) var(--state-hover-mix), var(--mix-dark) var(--state-hover-mix-rest));
    --hover-black: color-mix(in srgb, var(--color-black) var(--state-hover-mix), var(--mix-light) var(--state-hover-mix-rest));


    --active-defaut :color-mix(in srgb, var(--text-color) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-primary: color-mix(in srgb, var(--color-primary) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-secondary: color-mix(in srgb, var(--color-secondary) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-tertiary: color-mix(in srgb, var(--color-tertiary) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-dark: color-mix(in srgb, var(--color-dark) var(--state-active-mix), var(--mix-light) var(--state-active-mix-rest));
    --active-danger: color-mix(in srgb, var(--color-danger) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-info: color-mix(in srgb, var(--color-info) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-light: color-mix(in srgb, var(--color-light) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-neutral: color-mix(in srgb, var(--color-neutral) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-success: color-mix(in srgb, var(--color-success) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-warning: color-mix(in srgb, var(--color-warning) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-white: color-mix(in srgb, var(--color-white) var(--state-active-mix), var(--mix-dark) var(--state-active-mix-rest));
    --active-black: color-mix(in srgb, var(--color-black) var(--state-active-mix), var(--mix-light) var(--state-active-mix-rest));


    --color-primary-ghost: color-mix(in srgb, var(--color-primary) var(--state-ghost-transparent-mix), transparent);
    --color-secondary-ghost: color-mix(in srgb, var(--color-secondary) var(--state-ghost-transparent-mix), transparent);
    --color-tertiary-ghost: color-mix(in srgb, var(--color-tertiary) var(--state-ghost-transparent-mix), transparent);
    --color-dark-ghost: color-mix(in srgb, var(--color-dark) var(--state-ghost-transparent-mix), transparent);
    --color-danger-ghost: color-mix(in srgb, var(--color-danger) var(--state-ghost-transparent-mix), transparent);
    --color-info-ghost: color-mix(in srgb, var(--color-info) var(--state-ghost-transparent-mix), transparent);
    --color-light-ghost: color-mix(in srgb, var(--color-light) var(--state-ghost-transparent-mix), transparent);
    --color-neutral-ghost: color-mix(in srgb, var(--color-neutral) var(--state-ghost-transparent-mix), transparent);
    --color-success-ghost: color-mix(in srgb, var(--color-success) var(--state-ghost-transparent-mix), transparent);
    --color-warning-ghost: color-mix(in srgb, var(--color-warning) var(--state-ghost-transparent-mix), transparent);
    --color-white-ghost: color-mix(in srgb, var(--color-white) var(--state-ghost-transparent-mix), transparent);
    --color-black-ghost: color-mix(in srgb, var(--color-black) var(--state-ghost-transparent-mix), transparent);


    --hover-primary-ghost: color-mix(in srgb, var(--color-primary) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-secondary-ghost: color-mix(in srgb, var(--color-secondary) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-tertiary-ghost: color-mix(in srgb, var(--color-tertiary) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-dark-ghost: color-mix(in srgb, var(--color-dark) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-danger-ghost: color-mix(in srgb, var(--color-danger) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-info-ghost: color-mix(in srgb, var(--color-info) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-light-ghost: color-mix(in srgb, var(--color-light) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-neutral-ghost: color-mix(in srgb, var(--color-neutral) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-success-ghost: color-mix(in srgb, var(--color-success) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-warning-ghost: color-mix(in srgb, var(--color-warning) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-white-ghost: color-mix(in srgb, var(--color-white) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));
    --hover-black-ghost: color-mix(in srgb, var(--color-black) var(--state-ghost-hover-mix), transparent var(--state-ghost-hover-mix-rest));


    --active-primary-ghost: color-mix(in srgb, var(--color-primary) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-secondary-ghost: color-mix(in srgb, var(--color-secondary) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-tertiary-ghost: color-mix(in srgb, var(--color-tertiary) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-dark-ghost: color-mix(in srgb, var(--color-dark) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-danger-ghost: color-mix(in srgb, var(--color-danger) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-info-ghost: color-mix(in srgb, var(--color-info) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-light-ghost: color-mix(in srgb, var(--color-light) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-neutral-ghost: color-mix(in srgb, var(--color-neutral) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-success-ghost: color-mix(in srgb, var(--color-success) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-warning-ghost: color-mix(in srgb, var(--color-warning) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-white-ghost: color-mix(in srgb, var(--color-white) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));
    --active-black-ghost: color-mix(in srgb, var(--color-black) var(--state-ghost-active-mix), transparent var(--state-ghost-active-mix-rest));


    --selection-bg-color: var(--color-primary);
    --selection-text-color: var(--content-on-primary);


    --border-radius: 0.5rem;
    --border-width: 1px;
    --border-style: solid;
    --border-width-outline: 1px;
    --border-style-outline: solid;
    --border-radius-pill: 10rem;
    --border-radius-circle: 50%;


    --hr-border-width: var(--border-width);
    --hr-border-style: var(--border-style);


    --font-family-primary: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-secondary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-family-tertiary: system-ui, "Segoe UI", Roboto, Arial, sans-serif;


    --font-size-h1: 4rem;
    --font-size-h2: 3.5rem;
    --font-size-h3: 3rem;
    --font-size-h4: 2.5rem;
    --font-size-h5: 2rem;
    --font-size-h6: 1.5rem;


    --font-size: 1.4rem;
    --font-size-xs: 1rem;
    --font-size-sm: 1.2rem;
    --font-size-md: 1.4rem;
    --font-size-lg: 1.6rem;
    --font-size-xl: 1.8rem;
    --font-size-xxl: 2rem;


    --font-weight: 400;
    --font-weight-100: 100;
    --font-weight-200: 200;
    --font-weight-300: 300;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --font-weight-900: 900;


    --letter-spacing: normal;
    --letter-spacing-xs: -0.02em;
    --letter-spacing-sm: -0.01em;
    --letter-spacing-md: 0;
    --letter-spacing-lg: 0.025em;
    --letter-spacing-xl: 0.05em;
    --letter-spacing-xxl: 0.1em;


    --line-height: normal;
    --line-height-xs: 1;
    --line-height-sm: 1.2;
    --line-height-md: 1.5;
    --line-height-lg: 1.6;
    --line-height-xl: 1.75;
    --line-height-xxl: 2;


    --col-padding-x: 1rem;
    --col-padding-y: 1rem;


    --grid-padding-x: 1rem;
    --grid-padding-y: 1rem;
    --grid-gap: .5rem;


    --accordion-border-width: var(--border-width);
    --accordion-border-style: var(--border-style);
    --accordion-border-radius: var(--border-radius);
    --accordion-border-color: var(--border-color);
    --accordion-background-color: var(--color-transparent);
    --accordion-body-padding-x: 1rem;
    --accordion-body-padding-y: 1rem;
    --accordion-button-padding-x: 1.25rem;
    --accordion-button-padding-y: 1.25rem;
    --accordion-button-padding-x-sm: 1rem;
    --accordion-button-padding-y-sm: 1rem;
    --accordion-button-padding-x-md: 1.25rem;
    --accordion-button-padding-y-md: 1.25rem;
    --accordion-button-padding-x-lg: 1.5rem;
    --accordion-button-padding-y-lg: 1.5rem;
    --accordion-button-background-color: var(--color-transparent);
    --accordion-indicator-content: "+";


    --alert-container-padding-x: 0.5rem;
    --alert-container-padding-y: 0;
    --alert-gap: 1rem;
    --alert-border-width: var(--border-width);
    --alert-border-style: var(--border-style);
    --alert-border-radius: var(--border-radius);
    --alert-border-color: var(--border-color);
    --alert-background-color: var(--color-theme);
    --alert-header-padding-x: 1rem;
    --alert-header-padding-y: 1rem;
    --alert-body-padding-x: 1rem;
    --alert-body-padding-y: 1rem;
    --alert-footer-padding-x: 1rem;
    --alert-footer-padding-y: 1rem;


    --badge-border-radius: var(--border-radius);
    --badge-border-style: var(--border-style);
    --badge-border-width: var(--border-width);
    --badge-border-color: var(--border-color);
    --badge-background-color: var(--color-transparent);
    --badge-padding-x: .5rem;
    --badge-padding-y: .2rem;
    --badge-padding-x-sm: .4rem;
    --badge-padding-y-sm: .1rem;
    --badge-padding-x-md: .5rem;
    --badge-padding-y-md: .2rem;
    --badge-padding-x-lg: .6rem;
    --badge-padding-y-lg: .3rem;


    --button-border-radius: var(--border-radius);
    --button-border-style: var(--border-style);
    --button-border-width: var(--border-width);
    --button-border-color: var(--border-color);
    --button-background-color: var(--color-transparent);
    --button-outline-background-color: var(--color-transparent);
    --button-padding-x: 1.5rem;
    --button-padding-y: .75rem;
    --button-padding-x-sm: 1rem;
    --button-padding-y-sm: .5rem;
    --button-padding-x-md: 1.5rem;
    --button-padding-y-md: .75rem;
    --button-padding-x-lg: 2rem;
    --button-padding-y-lg: 1rem;
    --button-close-content: "×";
    --button-close-gap: 1rem;


    --card-border-style: var(--border-style);
    --card-border-width: var(--border-width);
    --card-border-radius: var(--border-radius);
    --card-border-color: var(--border-color);
    --card-background-color: var(--color-theme);
    --card-header-padding-x: 1rem;
    --card-header-padding-y: 1rem;
    --card-body-padding-x: 1rem;
    --card-body-padding-y: 1rem;
    --card-footer-padding-x: 1rem;
    --card-footer-padding-y: 1rem;
    --card-group-gap: 1rem;
    --card-min-width: 25rem;


    --collapse-border-width: var(--border-width);
    --collapse-border-style: var(--border-style);
    --collapse-border-radius: var(--border-radius);
    --collapse-border-color: var(--border-color);
    --collapse-background-color:  var(--color-transparent);
    --collapse-body-padding-x: 1rem;
    --collapse-body-padding-y: 1rem;
    --collapse-button-padding-x: 1.25rem;
    --collapse-button-padding-y: 1.25rem;
    --collapse-button-padding-x-sm: 1rem;
    --collapse-button-padding-y-sm: 1rem;
    --collapse-button-padding-x-md: 1.25rem;
    --collapse-button-padding-y-md: 1.25rem;
    --collapse-button-padding-x-lg: 1.5rem;
    --collapse-button-padding-y-lg: 1.5rem;
    --collapse-button-background-color: var(--color-transparent);
    --collapse-indicator-content: "+";


    --dialog-width: min(90vw, 720px);
    --dialog-max-height: 85vh;
    --dialog-width-sm: min(90vw, 480px);
    --dialog-max-height-sm: 80vh;
    --dialog-width-md: min(90vw, 720px);
    --dialog-max-height-md: 85vh;
    --dialog-width-lg: min(95vw, 1100px);
    --dialog-max-height-lg: 90vh;
    --dialog-border-style: var(--border-style);
    --dialog-border-width: var(--border-width);
    --dialog-border-radius: var(--border-radius);
    --dialog-border-color: var(--border-color);
    --dialog-header-padding-x: 1rem;
    --dialog-header-padding-y: 1rem;
    --dialog-body-padding-x: 1rem;
    --dialog-body-padding-y: 1rem;
    --dialog-footer-padding-x: 1rem;
    --dialog-footer-padding-y: 1rem;
    --dialog-background-color: var(--color-theme);


    --dropdown-body-border-radius: var(--border-radius);
    --dropdown-body-border-style: var(--border-style);
    --dropdown-body-border-width: var(--border-width);
    --dropdown-body-border-color: var(--border-color);
    --dropdown-body-background-color: var(--color-theme);


    --form-control-gap: 1rem;
    --input-background-color: var(--color-theme);
    --input-border-style: var(--border-style);
    --input-border-width: var(--border-width);
    --input-border-radius: var(--border-radius);
    --input-border-color: var(--border-color);
    --input-padding-x: 1.5rem;
    --input-padding-y: 0;
    --input-border-focus-color: var(--input-accent-color);
    --input-box-shadow-focus: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--input-accent-color) 50%, transparent);
    --input-accent-color: var(--color-primary);
    --input-box-shadow-focus-invalid: 0 0 0.5rem 0.25rem color-mix(in srgb, var(--input-accent-color-invalid) 50%, transparent);
    --input-accent-color-invalid: var(--color-danger);
    --textarea-padding-x: 1rem;
    --textarea-padding-y: 0.5rem;
    --input-height: 3.5rem;
    --input-switch-height: 2rem;
    --input-height-sm: 3rem;
    --input-height-md: 4rem;
    --input-height-lg: 5rem;
    --input-switch-height-sm: 1.5rem;
    --input-switch-height-md: 2rem;
    --input-switch-height-lg: 2.5rem;


    --link-border-radius: var(--border-radius);
    --link-border-style: var(--border-style);
    --link-border-width: var(--border-width);
    --link-padding-x: .25rem;
    --link-padding-y: .25rem;


    --list-border-width: var(--border-width);
    --list-border-style: var(--border-style);
    --list-border-radius: var(--border-radius);
    --list-border-color: var(--border-color);
    --list-item-padding-x: 1.5rem;
    --list-item-padding-y: .75rem;
    --list-item-padding-x-sm: 1rem;
    --list-item-padding-y-sm: .5rem;
    --list-item-padding-x-md: 1.5rem;
    --list-item-padding-y-md: .75rem;
    --list-item-padding-x-lg: 2rem;
    --list-item-padding-y-lg: 1rem;
    --list-item-border-width-inside-hover: 4px;
    --list-item-shadow-inset-reduce: 0 2px -2px;
    --list-inline-gap: 2rem;


    --navbar-gap: 2rem;
    --navbar-padding-x: 1.5rem;
    --navbar-padding-y: 1rem;
    --navbar-border-width: var(--border-width);
    --navbar-border-radius: 0;
    --navbar-border-style: var(--border-style);
    --navbar-border-color: var(--border-color);
    --navbar-collapse-gap: 2rem;
    --navbar-collapse-padding-y: 1rem;
    --navbar-collapse-padding-x: 0;


    --sidebar-width: 30rem;
    --sidebar-padding-x: 1rem;
    --sidebar-padding-y: 1rem;
    --sidebar-border-radius: var(--border-radius);
    --sidebar-border-width: var(--border-width);
    --sidebar-border-style: var(--border-style);
    --sidebar-border-color: var(--border-color);
    --sidebar-compact-width: var(--sidebar-width);
    --sidebar-compact-width-reduce: 6.5rem;
    --sidebar-compact-gap: 2rem;
    --sidebar-background-color: var(--background-color);


    --tab-panel-padding-y: 1rem;
    --tab-panel-padding-x: 1rem;
    --tab-panel-border-width: 0;
    --tab-panel-border-style: var(--border-style);
    --tab-panel-border-color: var(--border-color);
    --tab-panel-border-radius: var(--border-radius);


    --container-padding-x: 1.5rem;
    --container-padding-y: 1rem;
    --container-max-width: 1280px;


    --img-border-radius: var(--border-radius);
    --img-thumbnail-background-color: var(--background-color);
    --img-thumbnail-padding: .25rem;
    --img-thumbnail-border-width: var(--border-width);
    --img-thumbnail-border-color: var(--border-color);
    --img-thumbnail-border-style: var(--border-style);
    --img-thumbnail-border-radius: var(--border-radius);


    --table-border-style: var(--border-style);
    --table-border-width: var(--border-width);
    --table-border-color: var(--border-color);
    --table-border-divider-width: 2px;
    --table-border-divider-style: var(--border-style);
    --table-padding-y: .75rem;
    --table-padding-x: .75rem;
    --table-padding-y-sm: .5rem;
    --table-padding-x-sm: .5rem;
    --table-padding-y-md: .75rem;
    --table-padding-x-md: .75rem;
    --table-padding-y-lg: 1rem;
    --table-padding-x-lg: 1rem;
}


:root,
:root[data-theme="light"] {
    color-scheme: light;


    --state-hover-mix: 70%;
    --state-hover-mix-rest: calc(100% - var(--state-hover-mix));
    --state-active-mix: 60%;
    --state-active-mix-rest: calc(100% - var(--state-active-mix));
    --state-focus-mix: 40%;
    --state-focus-mix-rest: calc(100% - var(--state-focus-mix));


    --state-ghost-transparent-mix: 30%;
    --state-ghost-hover-mix: 65%;
    --state-ghost-hover-mix-rest: calc(100% - var(--state-ghost-hover-mix));
    --state-ghost-active-mix: 75%;
    --state-ghost-active-mix-rest: calc(100% - var(--state-ghost-active-mix));
    --state-ghost-focus-mix: 40%;
    --state-ghost-focus-mix-rest: calc(100% - var(--state-ghost-focus-mix));


    --text-color-dark: #262626;
    --text-color-light: #f5f5f5;


    --color-primary: #008f5a;
    --color-secondary: #4B3FD1;
    --color-tertiary: #E63E63;
    --color-dark: #2F2F2F;
    --color-danger: #C0392B;
    --color-info: #1F8ED6;
    --color-neutral: #A0A0A0;
    --color-success: #2E9E5B;
    --color-warning: #C88719;


    --content-on-primary: var(--text-color-light);
    --content-on-secondary: var(--text-color-light);
    --content-on-tertiary: var(--text-color-light);
    --content-on-dark: var(--text-color-light);
    --content-on-danger: var(--text-color-light);
    --content-on-info: var(--text-color-light);
    --content-on-light: var(--text-color-dark);
    --content-on-neutral: var(--text-color-light);
    --content-on-success: var(--text-color-light);
    --content-on-warning: var(--text-color-light);


    --content-on-primary-ghost: var(--text-color-dark);
    --content-on-secondary-ghost: var(--text-color-dark);
    --content-on-tertiary-ghost: var(--text-color-dark);
    --content-on-dark-ghost: var(--text-color-dark);
    --content-on-danger-ghost: var(--text-color-dark);
    --content-on-info-ghost: var(--text-color-dark);
    --content-on-light-ghost: var(--text-color-dark);
    --content-on-neutral-ghost: var(--text-color-dark);
    --content-on-success-ghost: var(--text-color-dark);
    --content-on-warning-ghost: var(--text-color-dark);
    --content-on-white-ghost: var(--text-color-dark);
    --content-on-black-ghost: var(--text-color-dark);


    --background-color: var(--color-white);
    --color-theme: var(--background-color);
    --text-color: var(--text-color-dark);
    --border-color: var(--gray-200);


    --hr-border-color: var(--border-color);


    --button-hover-background-color: rgba(0, 0, 0, 0.2);
    --button-active-background-color: rgba(0, 0, 0, 0.4);
    --button-focus-color: rgba(0, 0, 0, 0.4);
    --button-disabled-background-color: var(--gray-500);
    --button-disabled-border-color: var(--gray-500);
    --button-disabled-color: var(--text-color-light);
    --button-outline-disabled-background-color: var(--color-transparent);
    --button-outline-disabled-border-color: var(--gray-500);
    --button-outline-disabled-color: var(--text-color-dark);


    --text-color-disabled: var(--gray-500);


    --dialog-backdrop-background: rgba(225, 225, 225, 0.5);


    --input-icon-select-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
    --input-icon-switch-svg-before: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='grey'/%3E%3C/svg%3E");
    --input-icon-switch-svg-after: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='white'/%3E%3C/svg%3E");
    --input-content-on-accent-color : var(--text-color-light);
    --input-content-on-accent-color-invalid: var(--text-color-light);
    --input-disabled-color: var(--gray-500);
    --input-disabled-background-color: var(--gray-200);


    --link-disabled-color: var(--gray-500);


    --list-item-hover-background-color: rgba(0, 0, 0, 0.1);
    --list-item-active-background-color: rgba(0, 0, 0, 0.2);


    --box-shadow: 0 .05rem 1.5rem rgba(0, 0, 0, .08);
    --box-shadow-hover-before: 0 .4rem .8rem rgba(0, 0, 0, .08);
    --box-shadow-hover-after: 0 .8rem 1.6rem rgba(0, 0, 0, .08);

    --table-hover-background-color: rgba(0, 0, 0, 0.2);
    --table-active-background-color: rgba(0, 0, 0, 0.4);
    --table-striped-background-color: rgba(0, 0, 0, 0.1);
    --table-border-divider-color: var(--color-black);
}


:root[data-theme="dark"] {
    color-scheme: dark;


    --state-hover-mix: 70%;
    --state-hover-mix-rest: calc(100% - var(--state-hover-mix));
    --state-active-mix: 60%;
    --state-active-mix-rest: calc(100% - var(--state-active-mix));
    --state-focus-mix: 40%;
    --state-focus-mix-rest: calc(100% - var(--state-focus-mix));


    --state-ghost-transparent-mix: 15%;
    --state-ghost-hover-mix: 65%;
    --state-ghost-hover-mix-rest: calc(100% - var(--state-ghost-hover-mix));
    --state-ghost-active-mix: 75%;
    --state-ghost-active-mix-rest: calc(100% - var(--state-ghost-active-mix));
    --state-ghost-focus-mix: 40%;
    --state-ghost-focus-mix-rest: calc(100% - var(--state-ghost-focus-mix));


    --text-color-dark: #262626;
    --text-color-light: #f5f5f5;


    --color-primary: #4fffb0;
    --color-secondary: #6658E8;
    --color-tertiary: #FF5878;
    --color-dark: #2F2F2F;
    --color-danger: #E25555;
    --color-info: #3EB4E8;
    --color-light: #DDDDDD;
    --color-neutral: #C7C7C7;
    --color-success: #4EBE79;
    --color-warning: #E6AE2A;


    --content-on-primary: var(--text-color-dark);
    --content-on-secondary: var(--text-color-light);
    --content-on-tertiary: var(--text-color-dark);
    --content-on-dark: var(--text-color-light);
    --content-on-danger: var(--text-color-dark);
    --content-on-info: var(--text-color-dark);
    --content-on-light: var(--text-color-dark);
    --content-on-neutral: var(--text-color-dark);
    --content-on-success: var(--text-color-dark);
    --content-on-warning: var(--text-color-dark);


    --content-on-primary-ghost: var(--text-color-light);
    --content-on-secondary-ghost: var(--text-color-light);
    --content-on-tertiary-ghost: var(--text-color-light);
    --content-on-dark-ghost: var(--text-color-light);
    --content-on-danger-ghost: var(--text-color-light);
    --content-on-info-ghost: var(--text-color-light);
    --content-on-light-ghost: var(--text-color-light);
    --content-on-neutral-ghost: var(--text-color-light);
    --content-on-success-ghost: var(--text-color-light);
    --content-on-warning-ghost: var(--text-color-light);
    --content-on-white-ghost: var(--text-color-light);
    --content-on-black-ghost: var(--text-color-light);


    --background-color: var(--gray-800);
    --color-theme: var(--background-color);
    --text-color: var(--text-color-light);
    --border-color: var(--gray-700);


    --hr-border-color: var(--border-color);


    --button-hover-background-color: rgba(225, 225, 225, 0.2);
    --button-active-background-color: rgba(225, 225, 225, 0.4);
    --button-focus-color: rgba(225, 225, 225, 0.4);
    --button-disabled-background-color: var(--gray-500);
    --button-disabled-border-color: var(--gray-500);
    --button-disabled-color: var(--text-color-dark);
    --button-outline-disabled-background-color: var(--color-transparent);
    --button-outline-disabled-border-color: var(--gray-500);
    --button-outline-disabled-color: var(--text-color-light);


    --text-color-disabled: var(--gray-500);


    --dialog-backdrop-background: rgba(0, 0, 0, 0.5);


    --input-icon-select-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E");
    --input-icon-switch-svg-before: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='white'/%3E%3C/svg%3E");
    --input-icon-switch-svg-after: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='grey'/%3E%3C/svg%3E");
    --input-content-on-accent-color : var(--text-color-dark);
    --input-content-on-accent-color-invalid: var(--text-color-dark);
    --input-disabled-color: var(--gray-500);
    --input-disabled-background-color: var(--gray-700);


    --link-disabled-color: var(--gray-500);


    --list-item-hover-background-color: rgba(225, 225, 225, 0.2);
    --list-item-active-background-color: rgba(225, 225, 225, 0.4);


    --box-shadow: 0 .05rem 1.5rem rgba(0, 0, 0, .25);
    --box-shadow-hover-before: 0 .4rem .8rem rgba(0, 0, 0, .25);
    --box-shadow-hover-after: 0 .8rem 1.6rem rgba(0, 0, 0, .25);


    --table-hover-background-color: rgba(225, 225, 225, 0.2);
    --table-active-background-color: rgba(225, 225, 225, 0.4);
    --table-striped-background-color: rgba(0, 0, 0, 0.2);
    --table-border-divider-color: var(--color-white);
}