:root {
  --font-sans: "Lab Grotesque", Arial, Helvetica, sans-serif;
  --font-serif: "Lab Antiqua", "Times New Roman", Times, serif;
  --font-symbol: "Material Symbols Outlined";

  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-xl: 1.25rem;
  --font-2xl: 1.5rem;
  --font-3xl: 1.875rem;

  --max-w-base: 2560px;
  --max-w-sm: 540px;
  --max-w-md: 720px;
  --max-w-lg: 960px;
  --max-w-xl: 1140px;
  --max-w-xxl: 1320px;
  --max-w-full: 100%;

  --base-50: #f6f6f6;
  --base-100: #e7e7e7;
  --base-200: #d1d1d1;
  --base-300: #b0b0b0;
  --base-400: #888888;
  --base-500: #6d6d6d;
  --base-600: #5d5d5d;
  --base-700: #4f4f4f;
  --base-800: #454545;
  --base-900: #3d3d3d;
  --base-950: #111111;

  --kelp-50: #f8fbf8;
  --kelp-100: #f3f6f3;
  --kelp-200: #e8e9e2;
  --kelp-300: #d6d9ce;
  --kelp-400: #a8ad99;
  --kelp-500: #777f65;
  --kelp-600: #535c49;
  --kelp-700: #3f4535;
  --kelp-800: #2b2c21;
  --kelp-900: #1c1f14;
  --kelp-950: #0d0e07;

  --primary-50: var(--kelp-50);
  --primary-100: var(--kelp-100);
  --primary-200: var(--kelp-200);
  --primary-300: var(--kelp-300);
  --primary-400: var(--kelp-400);
  --primary-500: var(--kelp-500);
  --primary-600: var(--kelp-600);
  --primary-700: var(--kelp-700);
  --primary-800: var(--kelp-800);
  --primary-900: var(--kelp-900);
  --primary-950: var(--kelp-950);

  --padding-xxl: 4.5rem;
}

/* @media (max-width: 959px) {
  :root {
    --font-2xl: 1.25rem;
    --font-3xl: 1.5rem;
  }
} */

@media (min-width: 960px) {
  :root {
    --padding-xxl: 9rem;
  }
}