:root {
  /* dfference & contrast:  36 = 3:1, 50 = 4.5:1, 64 = 7:1 */
  /* hsl is the only color system that fades to black and white on the extremes of 1 parameter (l) */
  /* lch, oklch, lab and oklab don't fade to white with increased lightness */
  /* the l in lch is almost equal to the perceived lightness, and the h is almost constant, but the c follows a different curve for each color  */
  /*
  TODO:
  - save on variable names? bl=blue, br=brown, etc
  	savings: 513b: blue-14x2, brown-7x3, gray-20x4, grayblue-15x6, green-30x5, orange-7x4, purple-13x4, red-8x1, yellow-14x4
  - use css-nano to compress hsl to shorter hex (clean-css does not do that)
  */
  --blue-35: hsl(213,100%, 36%); /* links */
  --blue-65: hsl(213,100%, 63%); /* info box border, frontpage quicklink border */
  --blue-90: hsl(213,100%, 89%); /* frontpage quicklink background */
  --blue-93: hsl(213,100%, 92%); /* info box background */
  --brown-65: hsl( 41, 15%, 57%); /* frontpage quicklink border */
  --brown-90: hsl( 41, 15%, 86%); /* frontpage quicklink background */
  --gray-65: hsl(207, 12%, 60%); /* frontpage quicklink border */
  --gray-85: hsl(207, 12%, 81%); /* general borders */
  --gray-90: hsl(207, 12%, 87%); /* frontpage quicklink background */
  --gray-100: hsl(207, 12%,100%); /* page background, footer text */
  --grayblue-35: hsl(202, 32%, 33%); /* logo gray */
  --grayblue-45: hsl(202, 32%, 41%); /* aa-contrast with -97 */
  --grayblue-65: hsl(202, 32%, 58%); /* box button border on white sections, frontpage quicklink border */
  --grayblue-90: hsl(202, 32%, 86%); /* frontpage quicklink background */
  --grayblue-97: hsl(202, 32%, 96%); /* box button background on white sections */
  --green-3: hsl( 93, 44%, 4%); /* text */
  --green-15: hsl( 93, 44%, 14%); /* footer background */
  --green-25: hsl( 93, 44%, 20%); /* pop-up menu background */
  --green-35: hsl( 93, 44%, 26%); /* frontpage tabbar buttons */
  --green-45: hsl( 95, 37%, 33%); /* active tab text, contrast with tab background */
  --green-50: hsl( 93, 44%, 35%); /* green box icon/border, header text, button background */
  --green-65: hsl( 93, 44%, 45%); /* frontpage quicklink border */
  --green-75: hsl( 93, 44%, 56%); /* highghlight in desktop menu */
  --green-80: hsl( 93, 44%, 64%); /* frontpage background cloud */
  --green-90: hsl( 93, 44%, 81%); /* frontpage quicklink background */
  --green-95: hsl( 93, 44%, 91%); /* button background */
  --green-97: hsl( 93, 44%, 94%); /* green box background, menu & footer text */
  --orange-65: hsl( 25, 90%, 52%); /* frontpage quicklink border */
  --orange-90: hsl( 25, 90%, 86%); /* frontpage quicklink background */
  --purple-45: hsl(274, 60%, 54%); /* purple box icon/border */
  --purple-65: hsl(274, 60%, 69%); /* frontpage quicklink border */
  --purple-90: hsl(274, 60%, 90%); /* frontpage quicklink background */
  --purple-93: hsl(274, 60%, 93%); /* purple box background */
  --red-65: hsl( 9, 80%, 65%); /* frontpage quicklink border */
  --red-70: hsl( 9, 80%, 70%); /* frontpage background cloud */
  --red-90: hsl( 9, 80%, 90%); /* frontpage quicklink background */
  --yellow-65: hsl( 49,100%, 36%); /* warning box border, frontpage quicklink border */
  --yellow-90: hsl( 49,100%, 62%); /* frontpage background cloud */
  --yellow-93: hsl( 49,100%, 74%); /* warning box background */
  --yellow-97: hsl( 49,100%, 90%); /* frontpage quicklink background */
  --logo-green: hsl( 95, 37%, 54%); /* Should never change in other color modes. Note: doesn't meet any contrast requirement with white! */
  --main-color: var(--green-3);
  --main-background: var(--gray-100);
  --link-color: var(--blue-35);
  --button-color: var(--green-50);
  --button-background: var(--green-95);
  --button-main-text: var(--gray-100);
  --component-color: var(--grayblue-65);
  --component-background-color: var(--grayblue-97);
}

/*# sourceMappingURL=2-theme-main.css.map */