:root {
  /* color-scheme: light dark; */

  /* Light Mode Colors */
  --background-color: rgba(253, 240, 213, 1);
  --text-color: rgba(0, 48, 73, 1);
  /* --button-color: rgb(117, 109, 84); */
  --button-color: rgb(11, 24, 113);
  /* --highlight-color: rgb(45, 147, 173); */

  --highlight-color: rgb(255, 229, 76);

  --aside: rgb(229, 99, 153);
  --aside-alt: rgb(127, 144, 143);

  /* Form Colors */
  --valid-input: rgba(7, 77, 20, 0.75);
  --invalid-input: rgba(150, 20, 20, 0.668);
  --warning-input: rgba(255, 229, 76, 0.5);

  /* Switch Color */
  --switch-color: rgb(255, 229, 76, 0.7);

  /* Paragraph Spacing - at least 2 times font size */
  --space-paragraph: clamp(2.5rem, 2.413rem + 0.4348vw, 2.75rem);

  /* Spacing */
  --space-3xs: clamp(0.3125rem, 0.2908rem + 0.1087vw, 0.375rem);
  --space-2xs: clamp(0.625rem, 0.6033rem + 0.1087vw, 0.6875rem);
  --space-xs: clamp(0.9375rem, 0.894rem + 0.2174vw, 1.0625rem);
  --space-s: clamp(1.25rem, 1.2065rem + 0.2174vw, 1.375rem);
  --space-m: clamp(1.875rem, 1.8098rem + 0.3261vw, 2.0625rem);
  --space-l: clamp(2.5rem, 2.413rem + 0.4348vw, 2.75rem);
  --space-xl: clamp(3.75rem, 3.6196rem + 0.6522vw, 4.125rem);
  --space-2xl: clamp(5rem, 4.8261rem + 0.8696vw, 5.5rem);
  --space-3xl: clamp(7.5rem, 7.2391rem + 1.3043vw, 8.25rem);

  /* Spacing One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1821rem + 0.6522vw, 0.6875rem);
  --space-2xs-xs: clamp(0.625rem, 0.4728rem + 0.7609vw, 1.0625rem);
  --space-xs-s: clamp(0.9375rem, 0.7853rem + 0.7609vw, 1.375rem);
  --space-s-m: clamp(1.25rem, 0.9674rem + 1.413vw, 2.0625rem);
  --space-m-l: clamp(1.875rem, 1.5707rem + 1.5217vw, 2.75rem);
  --space-l-xl: clamp(2.5rem, 1.9348rem + 2.8261vw, 4.125rem);
  --space-xl-2xl: clamp(3.75rem, 3.1413rem + 3.0435vw, 5.5rem);
  --space-2xl-3xl: clamp(5rem, 3.8696rem + 5.6522vw, 8.25rem);

  /* Spacing Custom pairs */
  --space-s-l: clamp(1.25rem, 0.7283rem + 2.6087vw, 2.75rem);
}

/* USE IF NOT USING LIGHT/DARK TOGGLE */

/* Mountain */
/* Google Design */
/* Blue and Yellow */
/* 
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: rgb(0, 48, 70);
    --text-color: rgb(246, 241, 238);
    --highlight-color: rgb(229, 141, 102);
    --button-color: rgb(98, 170, 196);
    --alt-dark-color: rgb(3, 59, 85);

    --background-color: #e7e7ee;
    --text-color: #000b62;
    --highlight-color: #77536c;
    --button-color: #fb3aa2;

    --background-color: rgba(24, 49, 79, 1);
    --text-color: rgba(237, 235, 215, 1);
    --button-color: lab(90.7% -7.16 73.91);
    --highlight-color: rgba(219, 50, 77, 1);
    --aside: rgba(65, 123, 90, 1);
    --aside-alt: rgb(255, 229, 76, 0.2);

    --background-color: rgba(253, 240, 213, 1);
    --text-color: rgba(0, 48, 73, 1);
    --button-color: rgb(79, 74, 58);
    --highlight-color: rgb(45, 147, 173);
    --aside: rgb(229, 99, 153);
    --aside-alt: rgb(127, 144, 143);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --background-color: rgb(246, 241, 238);
    --text-color: rgb(3, 59, 85);
    --highlight-color: rgb(208, 101, 55);

    --text-color: rgba(24, 49, 79, 1);
    --background-color: rgba(237, 235, 215, 1);
    --button-color: rgba(65, 123, 90, 1);
    --highlight-color: rgb(255, 229, 76, 0.7);
    --alt-color: rgba(219, 50, 77, 1);

    --text-color: rgba(253, 240, 213, 1);
    --background-color: rgba(0, 48, 73, 1);
    --button-color: rgb(45, 147, 173);
    --highlight-color: rgb(117, 109, 84);
    --aside: rgb(229, 99, 153);
    --aside-alt: rgb(127, 144, 143);
  } */
/* } */