:root {
    /* globals */
    --body-font-family: PT Sans,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: 20px;
  
    /* colors */
    --primary-900: #081720;
    --primary-800: #091a24; /* shade + */
    --primary-700: #0a1d28; /* base */
    --primary-600: #23343e; /* tint + */
    --primary-500: #3b4a53;
    --primary-400: #546169;
    --primary-300: #6c777e;
    --primary-200: #858e94;
    --primary-100: #9da5a9;
    --primary-50: #b6bbbf;
  
    --secondary-900: #4ea0a5;
    --secondary-800: #58b4b9; /* shade + */
    --secondary-700: #d90f51; /* base */
    --secondary-600: #72ced3; /* tint + */
    --secondary-500: #81d3d8;
    --secondary-400: #91d9dd;
    --secondary-300: #a1dee2;
    --secondary-200: #b1e4e7;
    --secondary-100: #c0e9eb;
    --secondary-50: #d0eff0;
  
    --tertiary-900: #c12a5b;
    --tertiary-800: #d92f67; /* shade + */
    --tertiary-700: #f13472; /* base */
    --tertiary-600: #f24880; /* tint + */
    --tertiary-500: #f45d8e;
    --tertiary-400: #f5719c;
    --tertiary-300: #f785aa;
    --tertiary-200: #f89ab9;
    --tertiary-100: #f9aec7;
    --tertiary-50: #fbc2d5;
  
    --accent-900: #7a2900;
    --accent-800: #8a2e00; /* shade + */
    --accent-700: #993300; /* base */
    --accent-600: #a3471a; /* tint + */
    --accent-500: #ad5c33;
    --accent-400: #b8704d;
    --accent-300: #c28566;
    --accent-200: #cc9980;
    --accent-100: #d6ad99;
    --accent-50: #e0c2b3;
  
    --gray-900: #323232;
    --gray-800: #383838; /* shade + */
    --gray-700: #3e3e3e; /* base */
    --gray-600: #515151; /* tint + */
    --gray-500: #656565;
    --gray-400: #787878;
    --gray-300: #8b8b8b;
    --gray-200: #9f9f9f;
    --gray-100: #b2b2b2;
    --gray-50: #c5c5c5;
}