:root {
  --z-canvas: #F7F7F8;
  --z-surface: #FFFFFF;
  --z-raised: #EEEEF0;
  --z-hover: #EEEEF0;
  --z-selected: #E4E4E8;
  --z-border: #DEDEE3;
  --z-text: #202124;
  --z-secondary-text: #5F6368;
  --z-muted-text: #606068;
  --z-field-border: #85858F;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --z-canvas: #181818;
  --z-surface: #222222;
  --z-raised: #2C2C2C;
  --z-hover: #303030;
  --z-selected: #353535;
  --z-border: #3A3A3A;
  --z-text: #ECECEC;
  --z-secondary-text: #B8B8C0;
  --z-muted-text: #A0A0A8;
  --z-field-border: #85858F;
  color-scheme: dark;
  }
}
:root[data-theme="dark"], .z-inverse {
  --z-canvas: #181818;
  --z-surface: #222222;
  --z-raised: #2C2C2C;
  --z-hover: #303030;
  --z-selected: #353535;
  --z-border: #3A3A3A;
  --z-text: #ECECEC;
  --z-secondary-text: #B8B8C0;
  --z-muted-text: #A0A0A8;
  --z-field-border: #85858F;
  color-scheme: dark;
}