:root {
  
  /* Color */

  --black: #000;
  --white: #fff;

  --black-10: rgba(0,0,0,0.1);
  --black-20: rgba(0,0,0,0.2);
  --black-40: rgba(0,0,0,0.4);
  --black-60: rgba(0,0,0,0.6);
  --black-80: rgba(0,0,0,0.8);

  --white-20: rgba(255,255,255,0.2);
  --white-40: rgba(255,255,255,0.4);
  --white-60: rgba(255,255,255,0.6);
  --white-80: rgba(255,255,255,0.8);

  --gray-20: #ececec;
  --gray-40: #b4b4b4;
  --gray-60: #555555;
  --gray-80: #292929;

  --purple-10: #f4f4fb;
  --purple-20: #DBDAF1;
  --purple-40: #ADA9FF;
  --purple-60: #4B49B2;
  --purple-80: #2B1A78;

  --red-20: #FBDADC;
  --red-40: #FF999F;
  --red-60: #AF121D;
  --red-80: #5C0A0F;

  --blue-20: #E6EBF9;
  --blue-40: #B3C7FF;
  --blue-60: #7595F0;
  --blue-80: #172C68;

  --yellow-20: #FFEBCC;
  --yellow-40: #FFD699;
  --yellow-60: #F2AA40;
  --yellow-80: #663D00;

  --green-20: #E2F0EE;
  --green-40: #B2E2D6;
  --green-60: #39AA8E;
  --green-80: #286052;

  --sand-20: #F5F0ED;
  --sand-40: #F8D5BF;
  --sand-60: #C19F8B;
  --sand-80: #3D3129;

  --brand-purple: var(--purple-80);
  --brand-red: var(--red-60);

  --text-color: var(--black);

  --link-color: var(--purple-80);
  --link-hover-color: var(--red-60);
  
  /* ===== */

  /* Spacing */

  /* Layout spacing (based on REM) */

  --spacing-layout-0: 0;
  --spacing-layout-half: 0.75rem;
  --spacing-layout-1: 1.5rem;
  --spacing-layout-2: 3rem;
  --spacing-layout-3: 4.5rem;
  --spacing-layout-4: 6rem;
  --spacing-layout-5: 7.5rem;
  --spacing-layout-6: 9rem;
  --spacing-layout-7: 10.5rem;
  --spacing-layout-8: 12rem;
  --spacing-layout-9: 13.5rem;

  /* Component spacing (based on PX) */

  --spacing-component-0: 0;
  --spacing-component-1: 4px;
  --spacing-component-2: 8px;
  --spacing-component-3: 16px;
  --spacing-component-4: 32px;
  --spacing-component-5: 64px;
  --spacing-component-6: 128px;
  --spacing-component-7: 256px;
  --spacing-component-8: 512px;
  --spacing-component-9: 1024px;

  /* ===== */

  /* Layout */

  --gutter-width: var(--spacing-layout-2);
  --outer-margin: var(--spacing-layout-1);
  --outer-margin-desktop: var(--spacing-layout-2);
  --grid-max-width: 1300px;

  /* ===== */

  /* Typography */

  --font-family-serif: "Source Serif 4", serif;
  --font-family-sans-serif: "Source Sans 3", sans-serif;
   
  --font-family-base: var(--font-family-sans-serif);
  --font-family-heading: var(--font-family-serif);
  --font-family-display-1: var(--font-family-heading);
  --font-family-display-2: var(--font-family-heading);
  --font-family-h1: var(--font-family-heading);
  --font-family-h2: var(--font-family-heading); 
  --font-family-h3: var(--font-family-heading);
  --font-family-h4: var(--font-family-heading);
  --font-family-eyebrow: var(--base-font-family);

  --font-size-base: 20px;
  --font-size-display-1: 3.052rem;
  --font-size-display-2: 2.441rem;
  --font-size-h1: 1.953rem;
  --font-size-h2: 1.563rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1rem;
  --font-size-eyebrow: 0.7rem;
  --font-size-extra-large: var(--font-size-h2);
  --font-size-large: var(--font-size-h3);
  --font-size-small: 0.8rem;

  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-display-1: var(--font-weight-bold);
  --font-weight-display-2: var(--font-weight-bold);
  --font-weight-h1: var(--font-weight-bold);
  --font-weight-h2: var(--font-weight-bold);
  --font-weight-h3: var(--font-weight-bold);
  --font-weight-h4: var(--font-weight-bold);
  --font-weight-eyebrow: var(--font-weight-bold);
  
  --line-height-base: calc(1.5 * var(--font-size-base, 20px));
  --line-height-display-1: 1.2em;
  --line-height-display-2: 1.2em;
  --line-height-h1: 1.2em;
  --line-height-h2: 1.3em;
  --line-height-h3: 1.3em;
  --line-height-h4: 1.3em;
  --line-height-eyebrow: 2em;
  --line-height-extra-large: var(--line-height-h2);
  --line-height-large: var(--line-height-h3);
  --line-height-small: 1.6em;

  --letter-spacing-base: normal;
  --letter-spacing-display-1: normal;
  --letter-spacing-display-2: normal;
  --letter-spacing-h1: normal;
  --letter-spacing-h2: normal;
  --letter-spacing-h3: normal;
  --letter-spacing-h4: normal;
  --letter-spacing-eyebrow: 0.2em;
  --letter-spacing-small: normal;

  --text-underline-offset: 0.3em;

  /* ===== */

  /* Borner thicknesses */
  
  --hairline: 1px;
  --thin: 2px;
  --medium: 6px;
  --thick: 10px;

  /* Focus outline */
  --focus-outline: var(--medium) solid var(--purple-40);

  /* ===== */

  /* Border radius */

  --rounded-corners: var(--spacing-component-2);

  /* ===== */

  /* Shadows */

  --shadow-color: rgba(0,0,0,0.1);
  
  --shadow-small:
    0.2px 0.7px 0.8px var(--shadow-color),
    0.9px 3px 3.5px -2.5px var(--shadow-color),
    -2px -2px 2px -2px var(--shadow-color);
  --shadow-medium:
    0.2px 0.7px 0.8px var(--shadow-color),
    1.1px 3.8px 4.5px -1.2px var(--shadow-color),
    4.3px 14.8px 17.3px -2.5px var(--shadow-color),
    -2px -2px 2px -2px var(--shadow-color);
  --shadow-large:
    0.2px 0.7px 0.8px var(--shadow-color),
    2.9px 10px 11.7px -0.8px var(--shadow-color),
    8.6px 30px 35.1px -1.7px var(--shadow-color),
    22.4px 77.8px 91.1px -2.5px var(--shadow-color);
}