/*
--color-brand-lighter: hsl(173 44% 96%);
--color-brand-light: hsl(111 64% 94%);
--color-brand-base: hsl(174 100% 29%);
--color-brand-dark: hsl(172 100% 17%);
--color-brand-darker: hsl(131 100% 12%);

--color-background-elevated: hsl(0 0% 100%);
--color-background-base: hsl(173 44% 96%);

--color-text-base: hsl(240 17% 2%);
--color-text-muted: hsl(240 8% 63%);
--color-text-inverted: hsl(0 0% 100%);

--color-brand-lighter: 173 44% 96%;
--color-brand-light: 111 64% 94%;
--color-brand-base: 174 100% 29%;
--color-brand-dark: 172 100% 17%;
--color-brand-darker: 131 100% 12%;

--color-background-elevated: 0 0% 100%;
--color-background-base: 173 44% 96%;

--color-text-base: 240 17% 2%;
--color-text-muted: 240 8% 63%;
--color-text-inverted: 0 0% 100%;
*/

/* 
    --color-accent-base: 0 100% 38%;
    --color-accent-hover: 0 100% 48%;
    --color-accent-muted: 0 8% 63%;

    --color-heading-foreground: 0 64% 94%;
    --color-heading-background: 0 100% 17%;

    --color-background-elevated: 209 35% 15%;
    --color-background-base: 210 34% 13%;
    --color-background-navigation: 210 34% 11%;
    --color-background-header: 200 38% 15%;
    --color-background-highlight: 200 38% 25%;
    --color-background-backdrop: 0 0% 50%;

    --color-border-subtle: 240 8% 27%;
    --color-border-contrast: 240 8% 78%;
    --color-border-navigation: 210 34% 4%;

    --color-text-base: 240 17% 100%;
    --color-text-muted: 240 8% 63%;
*/

@layer base {
  :root {
    --color-accent-base: 174 100% 29%;
    --color-accent-hover: 172 100% 17%;
    --color-accent-muted: 131 100% 12%;
    --color-accent-contrast: 0 0% 100%;

    --color-heading-foreground: 172 100% 17%;
    --color-heading-background: 111 64% 94%;

    --color-background-elevated: 0 0% 100%;
    --color-background-base: 173 44% 96%;
    --color-background-navigation: 172 100% 17%;
    --color-background-header: 172 100% 17%;
    --color-background-highlight: 111 64% 94%;
    --color-background-backdrop: 0 0% 50%;

    --color-border-subtle: 111 42% 86%;
    --color-border-contrast: 0 0% 0%;
    --color-border-navigation: 131 100% 12%;

    --color-text-base: 158 8% 3%;
    --color-text-muted: 172 8% 38%;
  }

  body {
    color: hsl(var(--color-text-base));
  }
}