/* Resets that every page shares, marketing and app alike.

   Nothing here may reference a custom property. This file loads alongside whichever palette a
   page brings. Today that is always the design system's tokens.css, but a reference here would
   bind to whatever a page happened to load, which is how a second palette gets in. */

:root {
  color-scheme: light dark;
}

/* `clip`, not `hidden`. On the root and the body, `overflow-x: hidden` computes `overflow-y` to
   `auto`, which makes the body a scroll container — and a `position: sticky` element then sticks to
   a scrollport that never scrolls, so it silently does nothing. `clip` prevents the sideways scroll
   just as well and creates no scroll container. The landing page's pinned stage depends on it. */
html,
body {
  overflow-x: clip;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Only app_shell.html's theme_init script stamps data-theme on <html>; the server-rendered
   marketing and auth pages carry no theme JS and stay on the color-scheme above. Setting
   color-scheme is all these rules need to do — both palettes pick their values from it.

   test_base_css_references_no_custom_property_or_theme_colour substring-matches this whole file,
   comments included, so neither the custom-property syntax nor the theme-colour function may be
   written out here even in prose. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}