:root {
  --font-sans: "Aeonik Pro", Arial, Helvetica, sans-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;
  --font-4xl: 2.25rem;
  --font-5xl: 3rem;
  --font-6xl: 3.75rem;
  --font-7xl: 4.5rem;

  --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;

  --fern-frond-50: #f8f8ed;
  --fern-frond-100: #eff0d7;
  --fern-frond-200: #e0e2b4;
  --fern-frond-300: #c9ce88;
  --fern-frond-400: #b2b962;
  --fern-frond-500: #959e44;
  --fern-frond-600: #747d33;
  --fern-frond-700: #636b2f;
  --fern-frond-800: #484e26;
  --fern-frond-900: #3e4324;
  --fern-frond-950: #20240f;

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

  --padding-xxl: 4.5rem;
}

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