:root {
  /* fonts */
  --font-family: "Inter", sans-serif;
  --font-family-code: "Fira Code", monospace;

  /* size */
  --topnav-padding: 16px;
  --topnav-height: calc(var(--topnav-padding) * 2 + 1.5rem);

  /* colors (all themes) */
  --color-accent: hsl(201deg 100% 42%);
  --color-accent-hover: hsl(201deg 100% 63%);
  --primary-button-color: hsl(0deg 0% 33%);
  --primary-button-color-disabled: hsl(0deg 0% 33% / 50%);
  --primary-button-background: hsl(0deg 0% 92%);
  --primary-button-background-hover: hsl(0deg 0% 80%);

  /* dark theme colors (default without theme toggle) */
  --background: hsl(210deg 5% 15%); /* main  */
  --background-dimmed: hsl(213deg 10% 23%); /* sidebar, header */
  --background-code: hsl(200deg 11% 18%); /* docs code blocks */
  --background-inline-code: hsl(213deg 10% 23%); /* docs inline code */
  --modal-background: hsl(210deg 5% 15% / 95%); /* playground modal */
  --modal-circle-background: hsl(0deg 0% 15%);
  --color: hsl(0deg 0% 100%); /* text color, docs h1 */
  --color-hover: hsl(0deg 0% 100% / 70%);
  --color-slightly-dimmed: hsl(0deg 0% 90%); /* docs h5, th */
  --color-dimmed: hsl(0deg 0% 80%); /* docs paragraph */
  --color-very-dimmed: hsl(0deg 0% 100% / 30%); /* docs expander icon */
  --border-color: hsl(0deg 0% 100% / 20%);
  --border-color-strong: hsl(0deg 0% 100% / 40%);
  --border-color-dialog: hsl(0deg 0% 100% / 15%);
  --syntax-num: hsl(204deg 100% 75%);
  --syntax-string: hsl(203deg 100% 86%);
  --syntax-func: hsl(266deg 100% 86%);
  --syntax-builtin: hsl(27deg 100% 74%);
  --syntax-keyword: hsl(359deg 100% 75%);
  --syntax-comment: hsl(210deg 13% 72%);
  --syntax-error-line-background: hsl(210deg 7% 20%);
  --syntax-error-background: hsl(209deg 100% 33%);
  --alert-note: hsl(204deg 100% 75%);
  --alert-tip: hsl(203deg 100% 86%);
  --alert-important: hsl(266deg 100% 86%);
  --alert-warning: hsl(27deg 100% 74%);
  --alert-caution: hsl(359deg 100% 75%);
  --selection-highlight: hsl(0deg 0% 100% / 25%);

  color-scheme: dark;

  .light-theme-only {
    display: none;
  }

  & img.logo {
    content: url("../img/logo.v1.svg");
  }
}

/* light theme colors
   minimal example: frontend/css/switch.html */
:root:has(#dark-theme:not(:checked)) {
  --background: hsl(0deg 0% 96%); /* main  */
  --background-dimmed: hsl(0deg 0% 100% / 100%); /* sidebar, header */
  --background-code: hsl(200deg 13% 91%); /* docs code blocks */
  --background-inline-code: hsl(200deg 13% 91%); /* docs inline code */
  --modal-background: hsl(210deg 5% 85% / 95%); /* playground modal */
  --modal-circle-background: hsl(0deg 0% 85%);
  --color: hsl(0deg 0% 0%); /* text color, docs h1 */
  --color-hover: hsl(0deg 0% 0% / 70%);
  --color-slightly-dimmed: hsl(0deg 0% 10%); /* docs h5, th */
  --color-dimmed: hsl(0deg 0% 0% / 80%); /* docs paragraph */
  --color-very-dimmed: hsl(0deg 0% 0% / 30%); /* docs expander icon */
  --border-color: hsl(0deg 0% 0% / 20%);
  --border-color-strong: hsl(0deg 0% 0% / 30%);
  --border-color-dialog: hsl(0deg 0% 100% / 15%);
  --syntax-num: hsl(213deg 94% 35%);
  --syntax-string: hsl(212deg 92% 45%);
  --syntax-func: hsl(261deg 70% 60%);
  --syntax-builtin: hsl(24deg 74% 51%);
  --syntax-keyword: hsl(356deg 72% 47%);
  --syntax-comment: rgb(110 119 129);
  --syntax-error-line-background: hsl(200deg 13% 91%);
  --syntax-error-background: hsl(209deg 100% 75%);
  --alert-note: hsl(213deg 94% 35%);
  --alert-tip: hsl(212deg 92% 45%);
  --alert-important: hsl(24deg 74% 51%);
  --alert-warning: hsl(356deg 72% 47%);
  --alert-caution: rgb(110 119 129);
  --selection-highlight: hsl(0deg 0% 0% / 15%);

  color-scheme: light;

  & img.logo {
    content: url("../img/logo-light-theme.v1.svg");
  }

  .light-theme-only {
    display: unset;
  }

  .dark-theme-only {
    display: none;
  }
}

/* mobile */
@media (max-width: 767px) {
  .desktop {
    /* !important is used to override any other display properties that have higher specificity */
    display: none !important;
  }
}

@media (min-width: 767px) {
  .mobile {
    /* !important is used to override any other display properties that have higher specificity */
    display: none !important;
  }
}