:root {
  /* These are for internal calculations */
  --list-indent: 1.5em;
  --block-border-width: 0.2rem;
  --block-border-radius: 0em;
  --block-outset: 0.5rem;

  /* Try this for block elements that stack vertically:

      - Only ever add a bottom margin
      - The bottom margin is always the same
      - Do not add a bottom margin to the last child
  */
  --vertical-margin: 0.2em;

  /* Icon settings */
  --icon-size: 1.5rem;

  /* Rainbow Accents */
  --redish: var(--accent0);
  --orangeish: var(--accent1);
  --yellowish: var(--accent2);
  --greenish: var(--accent3);
  --tealish: var(--accent4);
  --blueish: var(--accent5);
  --violetish: var(--accent6);
  --brownish: var(--accent7);

  /* Semantic Colors */
  --color-error: var(--redish);
  --color-alert: var(--orangeish);
  --color-warn: var(--yellowish);
  --color-success: var(--greenish);
  --color-info: var(--tealish);

  /* Semantic color defaults from the palette. There is no need to use the
     current palette. Colors can be set arbitrarily. */
  --background-color: var(--shade0);
  --foreground-color: var(--shade7);

  --header-color: var(--shade6);

  --primary-color: var(--accent3);
  --secondary-color: var(--accent1);

  --hover-color: var(--accent3);
  --focus-color: var(--accent1);
  --code-background-color: var(--shade1);

  --highlight-color: var(--accent3-bg);

  --icon-active-color: var(--accent3);
  --icon-disabled-color: var(--shade2);
  --icon-inactive-color: var(--shade3);
  --icon-hover-color: var(--hover-color);
  --icon-background-color: rgba(0, 0, 0, 0);
  --icon-border-radius: 0.2em;

  --whiteboard-background-color: var(--shade1);
  --whiteboard-border-color: var(--shade2);

  --menu-background-color: var(--shade1);
  --menu-text-color: var(--shade6);
  --menu-header-background-color: var(--shade5);
  --menu-header-text-color: var(--shade1);
  --menu-border-color: var(--shade3);

  --common-menu-header-height: 3rem;
  --common-menu-header-padding: 0.5rem;

  --feedback-element-border-radius: 0.2em;
  --feedback-input-background-color: var(--background-color);
  --feedback-header-background-color: var(--menu-header-background-color);
  --feedback-header-text-color: var(--foreground-color);
  --feedback-list-background-color: rgba(0, 0, 0, 0);
  --feedback-list-text-color: var(--shade7);
  --feedback-footer-background-color: var(--shade2);
  --feedback-footer-text-color: var(--shade7);

  /* Mario Kram */
  --light-green: var(--accent3-bg);
  --dark-green: var(--accent3-fg);

  /* quizzes */
  --green-background-color: var(--accent3-bbg);
  --green-border-color: var(--accent3);
  --red-background-color: var(--accent0-bbg);
  --red-border-color: var(--accent0);

  /* make Henrik's style nicer */
  --list-indent: 0.5em;
}
