html {
  /* z-index scale */
  --send-to-back: -1;
  --bring-to-front: 9999;
  --bottom-layer: 100;
  --middle-layer: 200;
  --top-layer: 300;
  --backdrop: 400;
  --font-family:
    -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
    "Arial", sans-serif;
  --font-size: 1rem;
  --line-height: 1.5;
  --divider: 0.0625rem solid var(--color-Divider);

  /* colors */
  --color-Code-background: light-dark(
    var(--color-Code-background--light),
    var(--color-Code-background--dark)
  );
  --color-Divider: light-dark(
    var(--color-Divider--light),
    var(--color-Divider--dark)
  );
  --color-Icon: light-dark(var(--color-Icon--light), var(--color-Icon--dark));
  --color-Iframe-background: light-dark(
    var(--color-Iframe-background--light),
    var(--color-Iframe-background--dark)
  );
  --color-Iframe-link: light-dark(
    var(--color-Iframe-link--light),
    var(--color-Iframe-link--dark)
  );
  --color-Iframe-text-secondary: light-dark(
    var(--color-Iframe-text-secondary--light),
    var(--color-Iframe-text-secondary--dark)
  );
  --color-Iframe-text-tertiary: light-dark(
    var(--color-Iframe-text-tertiary--light),
    var(--color-Iframe-text-tertiary--dark)
  );
  --color-Iframe-text: light-dark(
    var(--color-Iframe-text--light),
    var(--color-Iframe-text--dark)
  );
  --color-Link-active-background: light-dark(
    var(--color-Link-active-background--light),
    var(--color-Link-active-background--dark)
  );
  --color-Link: light-dark(var(--color-Link--light), var(--color-Link--dark));
  --color-Menu-background: light-dark(
    var(--color-Menu-background--light),
    var(--color-Menu-background--dark)
  );
  --color-MenuBar-background: light-dark(
    var(--color-MenuBar-background--light),
    var(--color-MenuBar-background--dark)
  );
  --color-Negative: light-dark(
    var(--color-Negative--light),
    var(--color-Negative--dark)
  );
  --color-Outline: light-dark(
    var(--color-Outline--light),
    var(--color-Outline--dark)
  );
  --color-Positive: light-dark(
    var(--color-Positive--light),
    var(--color-Positive--dark)
  );
  --color-Text: light-dark(var(--color-Text--light), var(--color-Text--dark));
  --color-Tooltip-background: light-dark(
    var(--color-Tooltip-background--light),
    var(--color-Tooltip-background--dark)
  );
  --color-Tooltip-outline: light-dark(
    var(--color-Tooltip-outline--light),
    var(--color-Tooltip-outline--dark)
  );

  /* light */
  --color-Code-background--light: hsl(0deg 0% 96%);
  --color-Divider--light: rgb(0 0 0 / 10%);
  --color-Icon--light: hsl(0deg 0% 56%);
  --color-Iframe-background--light: #fff;
  --color-Iframe-link--light: hsl(0deg 0% 12%);
  --color-Iframe-text--light: hsl(0deg 0% 12%);
  --color-Iframe-text-secondary--light: hsl(0deg 0% 36%);
  --color-Iframe-text-tertiary--light: hsl(0deg 0% 56%);
  --color-Link--light: hsl(0deg 0% 12%);
  --color-Link-active-background--light: #fff;
  --color-Menu-background--light: hsl(0deg 0% 96%);
  --color-MenuBar-background--light: rgb(0 0 0 / 5%);
  --color-Negative--light: #d9173e;
  --color-Outline--light: hsl(0deg 0% 86%);
  --color-Positive--light: hsl(80deg 100% 25%);
  --color-Text--light: hsl(0deg 0% 36%);
  --color-Tooltip-background--light: #f5f5f5;
  --color-Tooltip-outline--light: #ddd;

  /* dark */
  --color-Code-background--dark: hsl(0deg 0% 16%);
  --color-Divider--dark: rgb(255 255 255 / 5%);
  --color-Icon--dark: hsl(0deg 0% 60%);
  --color-Iframe-background--dark: hsl(0deg 0% 12%);
  --color-Iframe-link--dark: hsl(0deg 0% 100%);
  --color-Iframe-text--dark: hsl(0deg 0% 100%);
  --color-Iframe-text-secondary--dark: hsl(0deg 0% 80%);
  --color-Iframe-text-tertiary--dark: hsl(0deg 0% 60%);
  --color-Link--dark: hsl(0deg 0% 100%);
  --color-Link-active-background--dark: hsl(0deg 0% 12%);
  --color-Menu-background--dark: hsl(0deg 0% 16%);
  --color-MenuBar-background--dark: rgb(255 255 255 / 2.5%);
  --color-Negative--dark: #ff305a;
  --color-Outline--dark: hsl(0deg 0% 26%);
  --color-Positive--dark: #8dd203;
  --color-Text--dark: hsl(0deg 0% 80%);
  --color-Tooltip-background--dark: #333;
  --color-Tooltip-outline--dark: #444;
}