:root {
  /* variable font setting for Recursive*/
  --casl: 0.3;

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

  /* 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.3em;

  /* These are just for internal calculations */
  --list-indent: 1.5em;
  --block-border-width: 0em;
  --block-border-radius: 0em;
  --block-outset: 0.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);

  --light-red: var(--accent0-bg);
  --light-orange: var(--accent1-bg);
  --light-yellow: var(--accent2-bg);
  --light-green: var(--accent3-bg);
  --light-teal: var(--accent4-bg);
  --light-blue: var(--accent5-bg);
  --light-violet: var(--accent6-bg);
  --light-brown: var(--accent7-bg);

  --dark-red: var(--accent0-fg);
  --dark-orange: var(--accent1-fg);
  --dark-yellow: var(--accent2-fg);
  --dark-green: var(--accent3-fg);
  --dark-teal: var(--accent4-fg);
  --dark-blue: var(--accent5-fg);
  --dark-violet: var(--accent6-fg);
  --dark-brown: var(--accent7-fg);

  /* 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(--shade5);
  --primary-color: var(--accent5);
  --secondary-color: var(--accent1);
  --icon-active-color: var(--accent5);
  --icon-inactive-color: var(--shade3);
  --hover-color: var(--accent5-bg);
  --code-background-color: var(--shade1);
  --highlight-color: var(--accent5-bg);
  --focus-color: var(--accent1);

  --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);
  --whiteboard-pen0: var(---accent0);
  --whiteboard-pen1: var(---accent1);
  --whiteboard-pen2: var(---accent2);
  --whiteboard-pen3: var(---accent3);
  --whiteboard-pen4: var(---accent4);
  --whiteboard-pen5: var(---accent5);
  --whiteboard-pen6: var(---accent6);
  --whiteboard-pen7: var(---accent7);

  --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(--shade0);
  --feedback-header-background-color: var(--shade2);
  --feedback-header-text-color: var(--shade7);
  --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);

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

  /* default maximum code block height */
  --code-block-max-height: 800px;
}
