: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);

  --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(--shade6);

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

  --hover-color: var(--accent5-bg);
  --code-background-color: var(--shade1);

  --highlight-color: var(--accent5-bg);
  --focus-color: var(--accent1);

  --icon-active-color: var(--accent5);
  --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: #eee;
  --whiteboard-border-color: var(--shade2);

  --menu-background-color: var(--shade1);
  --menu-text-color: var(--shade6);
  --menu-header-background-color: var(--primary-color);
  --menu-header-text-color: var(--shade6);
  --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);

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

@media (prefers-color-scheme: dark) {
  :root {
    --light-red: var(--accent0-fg);
    --light-orange: var(--accent1-fg);
    --light-yellow: var(--accent2-fg);
    --light-green: var(--accent3-fg);
    --light-teal: var(--accent4-fg);
    --light-blue: var(--accent5-fg);
    --light-violet: var(--accent6-fg);
    --light-brown: var(--accent7-fg);

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

.light {
  --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);
}

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

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

/* Colors for the grid templates */
@media (prefers-color-scheme: light) {
    :root {
      --canvas: color(
        from var(--light-shade0) srgb calc(r * 1.05) calc(g * 1.05) calc(b * 1.05)
      );
      --grid: var(--light-shade2);
    }
    :root.dark {
      --canvas: color(
        from var(--dark-shade0) srgb calc(r * 0.8) calc(g * 0.8) calc(b * 0.8)
      );
      --grid: var(--dark-shade2);
    }
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --canvas: color(
        from var(--dark-shade0) srgb calc(r * 0.8) calc(g * 0.8) calc(b * 0.8)
      );
      --grid: var(--dark-shade2);
    }
    :root.light {
      --canvas: color(
        from var(--light-shade0) srgb calc(r * 1.05) calc(g * 1.05) calc(b * 1.05)
      );
      --grid: var(--light-shade2);
    }
  }