:root {
    --tile-url: none;
    --size-hairline: 1px;
    --size-rxxxs: 0.125rem;
    --size-rxxs: 0.25rem;
    --size-rxs: 0.5rem;
    --size-rs: 0.75rem;
    --size-rm: 1rem;
    --size-rl: 1.5rem;
    --size-rxl: 2rem;
    --size-rxxl: 4rem;
    --size-xxxs: 0.125em;
    --size-xxs: 0.25em;
    --size-xs: 0.5em;
    --size-s: 0.75em;
    --size-m: 1em;
    --size-l: 1.5em;
    --size-xl: 2em;
    --size-xxl: 4em;
    --color-text: #666;
    --color-text-inverted: #eee;
    --color-main-dark: #557700;
    --color-main: #84af00;
    --color-main-light: #90d114;
    --color-main-inverted: white;
    --color-background: white;
    --color-background-inverted: black;
    --badge-background: var(--color-main-dark);
    --badge-color: var(--color-text-inverted);
    --badge-size: 1.5em;
    --base-transition: 0.2s ease-in-out;
    --font-weight-bold: 600;
    --font-weight-normal: 400;
    --layer-hud: 1;
    --layer-dialog: 2;
    --layer-toasts: 3;

    --input-border-color: #666;
    --input-border-radius: var(--size-rxs);
    --input-border-width: var(--size-hairline);

    --button-background: var(--color-main);
    --button-background-hover: var(--color-main-light);
    --button-color: var(--color-main-inverted);
    --button-border-radius: var(--size-rxs);

    --dialog-padding: 1em;
    --dialog-transition: var(--base-transition);

    --icon-button__color: inherit;
    --icon-button__color-hover: var(--color-main);

    --back-button__color: var(--color-main);
    --back-button__color-hover: var(--color-main-inverted);
    --back-button__background-hover: color-mix(in srgb, var(--color-main), transparent 80%);

    --circle-button__color: var(--color-main);
    --circle-button__background: var(--color-background);
    --circle-button__border-color: var(--color-background);
    --circle-button__color-hover: var(--color-main-inverted);
    --circle-button__background-hover: color-mix(in srgb, var(--color-main), transparent 80%);
    --circle-button__color-disabled: var(--color-main-inverted);
    --circle-button__background-disabled: color-mix(in srgb, #AAA, transparent 80%);

    --check-icon-line-width: 0.125em;
    --check-icon-line-length: 0.9em;
    --x-icon-line-width: 0.125em;
    --x-icon-line-length: 0.75em;
    --back-icon-arm-length: 1em;

    --color-positive-dark: #004400;
    --color-positive: #007700;
    --color-positive--light: #bdeab7;
    --color-info-dark: #001b44;
    --color-info: #006eba;
    --color-info--light: #b7d3ea;
    --color-negative-dark: #990000;
    --color-negative: #CC0000;
    --color-negative--light: #f4b7b7;

    --elevation-1: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
}