:root {
  color-scheme: light dark;
  --site-background: #f6f7fa;
  --site-surface: #eceef4;
  --site-raised: #fafafa;
  --site-text: #181818;
  --site-muted: #606060;
  --site-border: #d8dbe5;
  --site-button: #181818;
  --site-button-text: #fafafa;
  --site-header: rgba(246, 247, 250, 0.8);
  --site-accent: #505050;
  --connection-glow: #dedede;
  --device-screen: #efefef;
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-background: #0b0c10;
    --site-surface: #10121a;
    --site-raised: #151824;
    --site-text: #f2f2f2;
    --site-muted: #a9aebd;
    --site-border: #242836;
    --site-button: #f2f2f2;
    --site-button-text: #121212;
    --site-header: rgba(11, 12, 16, 0.78);
    --site-accent: #c4c4c4;
    --connection-glow: #0e1017;
    --device-screen: #12141c;
  }
}

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;
  }
}