:root {
  color-scheme: light dark;
  --site-background: #f5f5f5;
  --site-surface: #ededed;
  --site-raised: #ffffff;
  --site-text: #181818;
  --site-muted: #606060;
  --site-border: #d4d4d4;
  --site-button: #181818;
  --site-button-text: #ffffff;
  --site-header: rgba(245, 245, 245, 0.96);
  --site-accent: #505050;
  --connection-glow: #dedede;
  --device-screen: #efefef;
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-background: #090909;
    --site-surface: #121212;
    --site-raised: #1c1c1c;
    --site-text: #f2f2f2;
    --site-muted: #aaaaaa;
    --site-border: #343434;
    --site-button: #f2f2f2;
    --site-button-text: #121212;
    --site-header: rgba(9, 9, 9, 0.96);
    --site-accent: #c4c4c4;
    --connection-glow: #191919;
    --device-screen: #202020;
  }
}

html,
body {
  background-color: var(--site-background);
  color: var(--site-text);
}

::selection {
  background-color: var(--site-text);
  color: var(--site-background);
}

/* Keep decorative product artwork in the brand's monochrome palette.
   Marketplace app artwork and the hero film retain their original colors. */
[data-testid='platform-card'] [role='img'],
[data-testid='local-control-artwork'] {
  filter: grayscale(1);
}

#local-control-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  #local-control-light {
    display: none;
  }
  #local-control-dark {
    display: flex;
  }
}