:root {
  --background: oklch(1 0 0);                          /* $white / $body-background */
  --foreground: oklch(0.509 0.007 255.511);            /* $dark-gray / $body-font-color */
  --card: oklch(1 0 0);                                /* $card-background: $white */
  --card-foreground: oklch(0.509 0.007 255.511);       /* $card-font-color: $dark-gray */
  --primary: oklch(0.550 0.166 252.233);               /* $primary-color: #0072CE */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.752 0.196 127.674);             /* $secondary-color: #8BC400 */
  --secondary-foreground: oklch(0.145 0 0);            /* dark text on bright green */
  --muted: oklch(0.982 0 0);                           /* $light-gray: #f9f9f9 */
  --muted-foreground: oklch(0.509 0.007 255.511);      /* $dark-gray */
  --accent: oklch(0.661 0.151 240.376);                /* $highlight-color: #079ce5 */
  --accent-foreground: oklch(1 0 0);
  --destructive: oklch(0.633 0.216 32.009);            /* $alert-color: #f04124 */
  --destructive-foreground: oklch(1 0 0);
  --border: oklch(0.919 0 0);                          /* $medium-gray: #e4e4e4 */
  --input: oklch(0.919 0 0);                           /* $medium-gray: #e4e4e4 */
  --font-sans: 'museo-sans', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: Consolas, 'Liberation Mono', Courier, monospace;
  --radius: 0rem;                                      /* $global-radius: 0 */
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 1px hsl(0 0% 0% / 0.05), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-sm: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 4px 6px -2px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 8px 10px -2px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 12px 14px -3px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 1px hsl(0 0% 0% / 0.1), 0 16px 18px -3px hsl(0 0% 0% / 0.1);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  /* $mini-header-height: 60px mobile, $header-height: 100px desktop */
  --navbar-height: calc(var(--spacing) * 15);

  @media (min-width: 64rem) {
    --navbar-height: calc(var(--spacing) * 25);
  }
}