:root {
  --brown: hsl(30, 30%, 20%);
  --cream: hsl(40, 50%, 96%);
  
  --font-size--50: 0.875rem;
  --font-size--100: 1rem;
  --font-size--200: 1.25rem;
  --font-size--300: 1.5rem;
  --font-size--400: 2.25rem;
  --font-size--500: 3.75rem;
  
  --font-size--body: var(--font-size--100);
  --font-size--small: var(--font-size--50);
  --font-size--ui: var(--font-size--100);
  --font-size--section-title: var(--font-size--200);
  --font-size--subheader: var(--font-size--300);
  --font-size--header: var(--font-size--400);
  --font-size--display: var(--font-size--500);
  
  --font-weight--normal: 400;
  --font-weight--bold: 700;

  --font-family--body: system-ui, "Arial", "Helvetica", sans-serif;
  
  --line-height--base: 1.5;
  --line-height--tight: 1.2;
  
  --border-radius--small: 0.25rem;
  --border-radius--base: 0.5rem;
  --border-radius--large: 1.5rem;
  --border-radius--pill: 4rem;
  --border-radius--circle: 100%;
  
  --border-width--base: 1px;
  --border-width--thick: 4px;
  
  --border--base: var(--border-width--base) solid var(--color--primary-light);
  --border--light: var(--border-width--base) solid var(--color--gray-500);
  --border--dark: var(--border-width--base) solid var(--color--primary-base);
  
  --container--base: 50rem;
  --container--large: 85rem;
  
  --space--xx-small: 0.25rem;
  --space--x-small: 0.5rem;
  --space--small: 0.75rem;
  --space--base: 1rem;
  --space--medium: 1.5rem;
  --space--large: 2rem;
  --space--x-large: 3rem;
  --space--xx-large: 4rem;
  
  --transition-duration--base: 0.2s;
  --transition-timing--base: ease-in-out;
  
  --z-index--basement: -999999;
  --z-index--base: 1;
  --z-index--layout: 1000;
  --z-index--modal: 4000;
  --z-index--ceiling: 999999;
}