:root {
  /* Colors */
  --offblack-main-color: #553f39;
  --offwhite-main-color: #f7f7e7;
  --white-main-color: #fff;
  --green-main-color: #40806d;
  --green-main-color-light: #40806dee;
  --green-main-color-dark: color-mix(in oklab, var(--green-main-color) 90%, black);
  /* --green-main-color-light: #69998A; */
  --gray-support-color-white: #faf8f9;
  --yellow-support-color: #ffc478;
  --yellow-support-color-light: #ffc47888;
  --orange-support-color: #ff9477;
  --red-support-color: #bf1a06;
  --blue-support-color: #05449C;
  --purple-support-color: #764080;
  
  /* --red-contrast-color: #f6112d; */
  --gray-support-color: #806b6f;
  --gray-support-color-light: #ab9c9f; /* #806b6faa / rgb(50.2% 42% 43.5% / 66.7%) */
  --gray-support-color-extra-light: #eeebec;
  /* --red-support-color: #b50d20; */
  --red-support-color-dark: #690713;
  /* --blue-support-color: #0654bf; */
  /* --purple-support-color: #544080; */

  /* --purple-support-color: #494a9e; */

  /* Color usage */
  --text-main-color: var(--offblack-main-color);
  --text-support-color: var(--green-main-color);
  --background-main-color: var(--white-main-color);
  --contrast-color: var(--yellow-support-color);
  --support-color: var(--green-main-color);

  --nav-support-color: var(--yellow-support-color);
  --nav-contrast-color: var(--green-main-color);
  --nav-text-main-color: var(--offblack-main-color);
  --nav-text-contrast-color: var(--white-main-color);
  

  /* Sizing */
  --font-root-size: 112.5%;                                      /* 1    rem =  18px */
  --line-height   : calc(4/3);                                   /* 1.333rem =  24px */
  --font-size     : 1rem;                                        /* 1    rem =  18px */
  --font-size-lh  : calc(var(--font-size) * var(--line-height)); /* 1.333rem =  24px */

  --font-size-04  : calc(var(--font-size-lh) *  .5  );           /* 0.5  rem =  12px */
  --font-size-05  : calc(var(--font-size-lh) *  .625);           /* 0.667rem =  15px */
  --font-size-06  : calc(var(--font-size-lh) *  .75 );           /* 1    rem =  18px */
  --font-size-07  : calc(var(--font-size-lh) *  .875);           /* 1.167rem =  21px */
  --font-size-08  :      var(--font-size-lh)         ;           /* 1.333rem =  24px */
  --font-size-10  : calc(var(--font-size-lh) * 1.25 );           /* 1.667rem =  30px */
  --font-size-12  : calc(var(--font-size-lh) * 1.5  );           /* 2    rem =  36px */
  --font-size-16  : calc(var(--font-size-lh) * 2    );           /* 2.667rem =  48px */
  --font-size-22  : calc(var(--font-size-lh) * 2.75 );           /* 3.667rem =  66px */

  --spacing       : calc(var(--font-size) * var(--line-height)); /* 1.333rem =  24px */

  --spacing-01    : calc(var(--spacing) *   .125);               /* 0.167rem =   3px */
  --spacing-02    : calc(var(--spacing) *   .25 );               /* 0.333rem =   6px */
  --spacing-03    : calc(var(--spacing) *   .375);               /* 0.5  rem =   9px */
  --spacing-04    : calc(var(--spacing) *   .5  );               /* 0.667rem =  12px */
  --spacing-06    : calc(var(--spacing) *   .75 );               /* 1    rem =  18px */
  --spacing-07    : calc(var(--spacing) *   .875);               /* 1.167rem =  21px */
  --spacing-08    :      var(--spacing)          ;               /* 1.333rem =  24px */
  --spacing-10    : calc(var(--spacing) *  1.25 );               /* 1.667rem =  30px */
  --spacing-12    : calc(var(--spacing) *  1.5  );               /* 2    rem =  36px */
  --spacing-14    : calc(var(--spacing) *  1.75 );               /* 2.333rem =  42px */
  --spacing-16    : calc(var(--spacing) *  2    );               /* 2.667rem =  48px */
  --spacing-18    : calc(var(--spacing) *  2.25 );               /* 3    rem =  54px */
  --spacing-20    : calc(var(--spacing) *  2.5  );               /* 3.333rem =  60px */
  --spacing-22    : calc(var(--spacing) *  2.75 );               /* 3.667rem =  66px */
  --spacing-24    : calc(var(--spacing) *  3    );               /* 4    rem =  72px */
  --spacing-36    : calc(var(--spacing) *  4.5  );               /* 6    rem = 108px */
  --spacing-48    : calc(var(--spacing) *  6    );               /* 8    rem =  144px */

  --spacing-stroke: .24rem;

  /* Fonts */
  --main-font: AlegreyaSans, Helvetica, Arial, sans-serif;
  --support-font: AlegreyaSans, Georgia, serif;
  --code-font: Minlo, Menlo, Courier, monospace;
}