:root {
    /* globals */
    --body-font-family: Lora, Tahoma, Arial, Verdana, sans-serif;
    --body-color: var(--gray-700);
    --heading-font-family: var(--body-font-family);
    --heading-color: var(--gray-700);
    --link-color: var(--secondary-700);
    --link-color-hover: var(--secondary-900);
    --button-font-size: 14px;
  
    /* colors */
    --primary-900: #2c93bc;
    --primary-800: #32a6d4; /* shade + */
    --primary-700: #37b8eb; /* base */
    --primary-600: #4bbfed; /* tint + */
    --primary-500: #5fc6ef;
    --primary-400: #73cdf1;
    --primary-300: #87d4f3;
    --primary-200: #9bdcf5;
    --primary-100: #afe3f7;
    --primary-50: #c3eaf9;
  
    --secondary-900: #a62832;
    --secondary-800: #bb2d38; /* shade + */
    --secondary-700: #d0323e; /* base */
    --secondary-600: #d54751; /* tint + */
    --secondary-500: #d95b65;
    --secondary-400: #de7078;
    --secondary-300: #e3848b;
    --secondary-200: #e8999f;
    --secondary-100: #ecadb2;
    --secondary-50: #f1c2c5;
  
    --tertiary-900: #1e516b;
    --tertiary-800: #225b79; /* shade + */
    --tertiary-700: #266586; /* base */
    --tertiary-600: #3c7492; /* tint + */
    --tertiary-500: #51849e;
    --tertiary-400: #6793aa;
    --tertiary-300: #7da3b6;
    --tertiary-200: #93b2c3;
    --tertiary-100: #a8c1cf;
    --tertiary-50: #bed1db;
  
    --accent-900: #1b8233;
    --accent-800: #1f933a; /* shade + */
    --accent-700: #22A340; /* base */
    --accent-600: #38ac53; /* tint + */
    --accent-500: #4eb566;
    --accent-400: #64bf79;
    --accent-300: #7ac88c;
    --accent-200: #91d1a0;
    --accent-100: #a7dab3;
    --accent-50: #bde3c6;
  
    --gray-900: #2e2e2e;
    --gray-800: #333333; /* shade + */
    --gray-700: #393939; /* base */
    --gray-600: #4d4d4d; /* tint + */
    --gray-500: #616161;
    --gray-400: #747474;
    --gray-300: #888888;
    --gray-200: #9c9c9c;
    --gray-100: #b0b0b0;
    --gray-50: #c4c4c4;
}