:root {
  color-scheme: light dark;
  --page: #fafbfd;
  --surface: #fff;
  --text: #0a2e3f;
  --text-muted: #4e5765;
  --accent: #007cb0;
  --accent-text: #00608a;
  --accent-surface: #e6f6fd;
  --line: #dbe4e9;
  --control-border: #bdcdd5;
  --preview-surface: #e7eef3;
  --section-surface: #edf3f7;
  --tab-border: #cedbe3;
  --tab-selected: #fff9;
  --tab-hover: #fffa;
  --panel-border: #d6e1e8;
  --badge-surface: #f2f5f7;
  --upload-surface: #f5fafc;
  --upload-border: #a5c6d6;
  --share-surface: #f3f6f8;
  --success: #2e7961;
  --device-frame: #0a2e3f;
  --button-fill: #007cb0;
  --button-hover: #00608a;
  --button-text: #fff;
  color: var(--text);
  background: var(--page);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #0c0e12;
    --surface: #161a20;
    --text: #e6eaf0;
    --text-muted: #a5afbe;
    --accent: #4cc0ee;
    --accent-text: #8ad6f5;
    --accent-surface: #102c3b;
    --line: #353c47;
    --control-border: #707b8c;
    --preview-surface: #1a242e;
    --section-surface: #101820;
    --tab-border: #353c47;
    --tab-selected: #1e2d39;
    --tab-hover: #243746;
    --panel-border: #353c47;
    --badge-surface: #232830;
    --upload-surface: #12232d;
    --upload-border: #4e6d7e;
    --share-surface: #1a1f27;
    --success: #79d5b1;
    --device-frame: #4e5765;
  }
}