.stone {
    --background: 0 0% 100%;
    --foreground: 0 1% 29%;

    --card: 0 0% 100%;
    --card-foreground: 210 11% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 210 11% 15%;

    --primary: 182 100% 37%;
    --primary-foreground: 0 0% 100%;

    --secondary: 219 20.5% 29.6%;
    --secondary-foreground: 0 0% 100%;
    --muted: 0 0% 89%;
    --muted-foreground: 0 0% 34%;
    --accent: 204 24% 96%;
    --accent-foreground: 0 0% 0%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 84% 60%;
    --information: 13 90% 92%;
    --information-foreground: 0 0% 20%;

    --border: 220 10.6% 83.3%;
    --input: 220 10.6% 83.3%;
    --ring: var(--primary);

    --radius: 0.188rem;
    --button-radius: 0.188rem;
    --input-radius: 0.188rem;
    --card-radius: 0.188rem;

    --font-family-heading: var(--font-dmsans);
    --font-family-body: var(--font-dmsans);

    --logo: url('/images/stone/stone-logo.png');
    --header-background: hsl(var(--background));
    --header-foreground: hsl(var(--foreground));
    --header-selected-background: hsl(var(--primary) / 0.2);
    --header-logo: hsl(var(--foreground));
    --footer-background: hsl(var(--secondary));
    --footer-foreground: var(--secondary-foreground);

    --milestone-header-background: hsl(var(--background));
    --milestone-background: hsl(var(--background));
    --milestone-foreground: hsl(var(--foreground));
    --milestone-heading: hsl(var(--primary));
  }