@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));
  }
}