:root {
  interpolate-size: allow-keywords;

  --primary: hsl(210, 100%, 42%);
  --white: hsl(0, 0%, 100%);
  --surface: hsl(220, 30%, 98%);
  --grey-50: hsl(220, 30%, 95%);
  --grey-100: hsl(220, 30%, 90%);
  --grey-150: hsl(220, 30%, 85%);
  --grey-200: hsl(220, 30%, 80%);
  --surface0: hsl(220, 30%, 75%);
  --grey-300: hsl(220, 30%, 70%);
  --grey-350: hsl(220, 30%, 65%);
  --grey-400: hsl(220, 30%, 60%);
  --grey-500: hsl(220, 30%, 40%);
  --grey-900: hsl(240, 1%, 16%);
  --black: hsl(0, 0%, 0%);
  --alert: hsl(335, 100%, 50%);
  --warning: hsl(58, 98%, 48%);
  --wa: hsl(132, 75%, 45%);

  --grid-color: hsl(235, 100%, 95%);
  --grid-bg: hsl(250, 100%, 99%);

  /* CORNER SIZES */
  --radius-4: 0.25rem;
  --radius-6: 0.375rem;
  --radius-8: 0.5rem;
  --radius-10: 0.625rem;
  --radius-12: 0.75rem;
  --radius-14: 0.875rem;
  --radius-16: 1rem;
  --radius-18: 1.125rem;
  --radius-20: 1.25rem;
  --radius-24: 1.5rem;
  --radius-28: 1.75rem;
  --radius-32: 2rem;

  /* GAP SIZES */
  --gap-2: 0.125rem;
  --gap-3: 0.188rem;
  --gap-4: 0.25rem;
  --gap-6: 0.375rem;
  --gap-8: 0.5rem;
  --gap-10: 0.625rem;
  --gap-12: 0.75rem;
  --gap-14: 0.875rem;
  --gap-16: 1rem;
  --gap-18: 1.125rem;
  --gap-20: 1.25rem;
  --gap-22: 1.375rem;
  --gap-24: 1.5rem;
  --gap-28: 1.75rem;
  --gap-32: 2rem;
  --gap-36: 2.25rem;
  --gap-40: 2.5rem;
  --gap-48: 3rem;
  --gap-56: 3.5rem;
  --gap-64: 4rem;
  --gap-72: 4.5rem;
  --gap-80: 5rem;
  --gap-88: 5.5rem;
  --gap-96: 6rem;
  --gap-128: 8rem;
  --gap-152: 9.5rem;
  --gap-176: 11rem;
  --gap-192: 12rem;
  --gap-208: 13rem;
  --gap-224: 14rem;
  --gap-240: 15rem;

  /* FONT SIZES */
  --font-10: 0.625rem;
  --font-11: 0.688rem;
  --font-12: 0.75rem;
  --font-13: 0.813rem;
  --font-14: 0.875rem;
  --font-15: 0.938rem;
  --font-16: 1rem;
  --font-18: 1.125rem;
  --font-20: 1.25rem;
  --font-22: 1.375rem;
  --font-24: 1.5rem;
  --font-28: 1.75rem;
  --font-32: 2rem;
  --font-36: 2.25rem;
  --font-40: 2.5rem;
  --font-48: 3rem;
  --font-56: 3.5rem;
  --font-64: 4rem;
  --font-72: 4.5rem;
  --font-80: 5rem;
  --font-88: 5.5rem;
  --font-96: 6rem;
  --font-112: 7rem;
  --font-128: 8rem;
}