:root {
    color-scheme: light;

    color: var(--color-text);

    --color-background: var(--color-pampas);
    --color-text: var(--color-rangoon);
    --color-box-shadow: rgb(0 0 0 / 50%);

    --color-accent-base: var(--color-teal1);
    --color-accent-bg-subtle: var(--color-teal2);
    --color-accent-bg: var(--color-teal3);
    --color-accent-bg-hover: var(--color-teal4);
    --color-accent-bg-active: var(--color-teal5);
    --color-accent-line: var(--color-teal6);
    --color-accent-border: var(--color-teal7);
    --color-accent-border-hover: var(--color-teal8);
    --color-accent-solid: var(--color-teal9);
    --color-accent-solid-hover: var(--color-teal10);
    --color-accent-text: var(--color-teal11);
    --color-accent-text-contrast: var(--color-teal12);

    --color-grey-base: var(--color-olive1);
    --color-grey-bg-subtle: var(--color-olive2);
    --color-grey-bg: var(--color-olive3);
    --color-grey-bg-hover: var(--color-olive4);
    --color-grey-bg-active: var(--color-olive5);
    --color-grey-line: var(--color-olive6);
    --color-grey-border: var(--color-olive7);
    --color-grey-border-hover: var(--color-olive8);
    --color-grey-solid: var(--color-olive9);
    --color-grey-solid-hover: var(--color-olive10);
    --color-grey-text: var(--color-olive11);
    --color-grey-text-contrast: var(--color-olive12);

    --color-danger-base: var(--color-red1);
    --color-danger-bg-subtle: var(--color-red2);
    --color-danger-bg: var(--color-red3);
    --color-danger-bg-hover: var(--color-red4);
    --color-danger-bg-active: var(--color-red5);
    --color-danger-line: var(--color-red6);
    --color-danger-border: var(--color-red7);
    --color-danger-border-hover: var(--color-red8);
    --color-danger-solid: var(--color-red9);
    --color-danger-solid-hover: var(--color-red10);
    --color-danger-text: var(--color-red11);
    --color-danger-text-contrast: var(--color-red12);
}
