:root {

  --font-agave-nerd-monospace: "Agave Nerd Font Mono";
  --font-agave-nerd: "Agave Nerd Font";

  --color-black: #000000;
  --color-red-rose: #f7768e;
  --color-orange-sand: #ff9e64;
  --color-yellow-sand: #e0af68;
  --color-green-moss: #9ece6a;
  --color-blue-sky: #7aa2f7;
  --color-lavender: #bb9af7;
  --color-white: #ffffff;

  --color-midnight-950: #16161e;
  --color-midnight-900: #1a1b26;
  --color-indigo-850: #1f2335;
  --color-slate-800: #24283b;
  --color-slate-700: #292e42;
  --color-slate-600: #414868;
  --color-slate-500: #565f89;
  --color-slate-500-20: #565F8934;
  --color-periwinkle-300: #9aa5ce;
  --color-periwinkle-200: #a9b1d6;
  --color-periwinkle-100: #c0caf5;
  --color-warm-gray-100: #cfc9c2;

  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-black-04: rgba(0, 0, 0, 0.04);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-60: rgba(255, 255, 255, 0.6);

  --color-red-rose-50: rgba(247, 118, 142, 0.5);
  --color-yellow-sand-50: rgba(224, 175, 104, 0.5);
  --color-green-moss-50: rgba(158, 206, 106, 0.5);
  --color-slate-500-20: rgba(86, 95, 137, 0.2);

  --heading-h1-size: 2rem;
  --heading-h2-size: 1.75rem;
  --heading-h3-size: 1.6rem;
  --heading-h4-size: 1.45rem;
  --heading-h5-size: 1.15rem;
  --heading-h6-size: 0.90rem;

  --base-lg-size: 1.1rem;
  --base-md-size: 1rem;
  --base-sm-size: 0.9rem;
  --base-es-size: 0.8rem;

  --radius-sm: 0.125rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.5rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-11: 2.75rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;
  --space-36: 9rem;
  --space-40: 10rem;
}