:root {
  --auto-frontend-primary-color: #4062ed;
  --auto-frontend-bg-color: #fff;
  --auto-frontend-text-color: rgba(0, 0, 0, 0.88);
}

*,
::before,
::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  background-color: var(--auto-frontend-bg-color);
  color: var(--auto-frontend-text-color);
}

#root {
  height: 100%;
}

/* Keyed on the theme class, never on prefers-color-scheme: the class is the single
   theme input (useIsDarkTheme in src/utils/media-query.ts, seeded by main.tsx), so a
   user who picked light keeps light text even when the browser is dark, and "auto"
   still follows the browser because the resolver reads it. Declared on body, not
   :root, because that is where the class lives -- anything that reads these vars at
   :root (bf-pages.css tokens) must see the light value and re-bind in its own
   .auto-frontend-dark block. */
body.auto-frontend-dark {
  --auto-frontend-bg-color: #141414;
  --auto-frontend-text-color: rgba(255, 255, 255, 0.85);
}