@layer system {
  :root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    --layout-header-height: 56px;
    --layout-sidebar-width: 360px;
    --layout-drawer-mini: 64px;
    --layout-drawer-midi: 40dvh;
  }

  html {
      &.force-dark { color-scheme: dark; }
      &.force-light { color-scheme: light; }

      color-scheme: light dark;

      --light-bg: ghostwhite;
      --light-color: darkslategray;
      --light-accent: tomato;

      --dark-bg: #223;
      --dark-color: ghostwhite;
      --dark-accent: gold;

      --theme-bg: light-dark(var(--light-bg), var(--dark-bg));
      --theme-color: light-dark(var(--light-color), var(--dark-color));
      --theme-accent: light-dark(var(--light-accent), var(--dark-accent));

      /* defaults */

      font-size: 14px;
      color: var(--theme-color);
      background: var(--theme-bg);
  }

  /*
   put content on the page that js can use to detect breakpoints
   @see app/primitives/useBreakpoint
  */

  body:before {
    content: 'bp:phone';
    display: none;
  }

  @media (--tablet) {
    body:before {
      content: 'bp:tablet';
    }
  }

  @media (--desktop) {
    body:before {
      content: 'bp:desktop';
    }
  }
}