:root {
  /* content colors */

  --blue-dark: #141d24;
  --blue-medium: #1e2835;
  --blue-medium-alpha: #1e283588;
  --blue-light: #fafdff;
  --white: #fff;
  --white-alpha: #fff8;
  --black-overlay: #0005;
  --blue-overlay: #418ce555;

  /* dark theme colors */

  --pale-red: #f19797;
  --pale-orange: #f8cd90;
  --pale-yellow: #f7f890;
  --pale-green: #97f1a3;
  --pale-blue: #97c0f1;
  --pale-purple: #97a8f1;
  --pale-pink: #e797f1;

  /* light theme colors */

  --bright-red: #ff5151;
  --bright-orange: #fd803c;
  --bright-yellow: #f0c82c;
  --bright-green: #39f951;
  --bright-blue: #418ce5;
  --bright-purple: #4d3be6;
  --bright-pink: #ee3cb1;

  /* monochromatic */

  --dull-white: #f9f9f9;
  --dull-lightgray: #f0f0f0;
  --dull-black: #1c1c1c;
  --dull-gray: #262626;
  --dull-gray-alpha: #26262688;
}

/* dark theme */
main {
  --red: var(--pale-red);
  --orange: var(--pale-orange);
  --yellow: var(--pale-yellow);
  --green: var(--pale-green);
  --blue: var(--pale-blue);
  --purple: var(--pale-purple);
  --pink: var(--pale-pink);

  --background: var(--blue-dark);
  --card: var(--blue-medium);
  --card-alpha: var(--blue-medium-alpha);
  --text: var(--white);
  --accent: var(--blue);
  --link: var(--accent);
  --overlay: var(--black-overlay);
  --local-accent: var(--text);
}

main.monochrome {
  --background: var(--dull-black);
  --card: var(--dull-gray);
  --card-alpha: var(--dull-gray-alpha);
  --text: var(--dull-white);
  --accent: var(--text);
}

/* light theme */
@media (prefers-color-scheme: light) {
  main {
    --red: var(--bright-red);
    --orange: var(--bright-orange);
    --yellow: var(--bright-yellow);
    --green: var(--bright-green);
    --blue: var(--bright-blue);
    --purple: var(--bright-purple);
    --pink: var(--bright-pink);
    --background: var(--blue-light);
    --card: var(--white);
    --card-alpha: var(--white-alpha);
    --text: var(--blue-dark);
    --accent: var(--blue);
    --link: var(--accent);
    --overlay: var(--blue-overlay);
  }

  main.monochrome {
    --background: var(--dull-lightgray);
    --card: var(--dull-white);
    --card-alpha: var(--dull-white);
    --text: var(--dull-black);
  }
}

main.light {
  --red: var(--bright-red);
  --orange: var(--bright-orange);
  --yellow: var(--bright-yellow);
  --green: var(--bright-green);
  --blue: var(--bright-blue);
  --purple: var(--bright-purple);
  --pink: var(--bright-pink);
  --background: var(--blue-light);
  --card: var(--white);
  --card-alpha: var(--white-alpha);
  --text: var(--blue-dark);
  --accent: var(--blue);
  --link: var(--accent);
  --overlay: var(--blue-overlay);
}

main.light.monochrome {
  --background: var(--dull-lightgray);
  --card: var(--dull-white);
  --card-alpha: var(--dull-white);
  --text: var(--dull-black);
}

/* monochrome shared */
main.monochrome {
  --red: var(--text);
  --orange: var(--text);
  --yellow: var(--text);
  --green: var(--text);
  --blue: var(--text);
  --purple: var(--text);
  --pink: var(--text);
}