html[data-theme="light"]{
  --background:#f4f4f4;
  --layer:#ffffff;
  --layer-02:#f4f4f4;
  --layer-hover:#e8e8e8;
  --layer-selected:#e0e0e0;
  --text-primary:#161616;
  --text-secondary:#525252;
  --text-helper:#6f6f6f;
  --text-inverse:#ffffff;
  --border-subtle:#e0e0e0;
  --border-strong:#8d8d8d;
  --interactive:#0f62fe;
  --interactive-hover:#0043ce;
  --focus:#0f62fe;
  --link:#0f62fe;
  --button-primary:#0f62fe;
  --button-primary-hover:#0043ce;
  --button-secondary:#161616;
  --reading-accent-surface:#161616;
  --reading-accent-text:#ffffff;
  --reading-accent-muted:#c6c6c6;
  --reading-accent-border:#393939;
  --reading-row-hover-surface:#e8e8e8;
  --reading-row-hover-text:#161616;
  --reading-row-hover-border:#c6c6c6;
  --surface-accent:var(--reading-accent-surface);
  --text-on-accent:var(--reading-accent-text);
  --text-on-accent-secondary:var(--reading-accent-muted);
  --status-neutral:#e0e0e0;
  --status-warning:#f1c21b;
  --status-success:#42be65;
  --status-text:#393939;
  --inverse-background:#161616;
  --inverse-layer:#262626;
  --inverse-text:#ffffff;
  --inverse-secondary:#c6c6c6;
  --inverse-border:#393939;
  --selection-bg:#d0e2ff;
  --selection-text:#161616;
  --overlay:rgba(22,22,22,.32);
  --panel-shadow:rgba(0,0,0,.18);
  --border:var(--border-subtle);
  --status-bg:var(--status-neutral);
  --button-primary-text:var(--text-inverse);
  color-scheme:light;
}

html[data-theme="dark"]{
  --background:#161616;
  --layer:#262626;
  --layer-02:#1f1f1f;
  --layer-hover:#333333;
  --layer-selected:#393939;
  --text-primary:#f4f4f4;
  --text-secondary:#c6c6c6;
  --text-helper:#a8a8a8;
  --text-inverse:#ffffff;
  --border-subtle:#393939;
  --border-strong:#6f6f6f;
  --interactive:#4589ff;
  --interactive-hover:#78a9ff;
  --focus:#78a9ff;
  --link:#78a9ff;
  --button-primary:#0f62fe;
  --button-primary-hover:#0043ce;
  --button-secondary:#f4f4f4;
  --reading-accent-surface:#393939;
  --reading-accent-text:#f4f4f4;
  --reading-accent-muted:#c6c6c6;
  --reading-accent-border:#6f6f6f;
  --reading-row-hover-surface:#333333;
  --reading-row-hover-text:#f4f4f4;
  --reading-row-hover-border:#525252;
  --surface-accent:var(--reading-accent-surface);
  --text-on-accent:var(--reading-accent-text);
  --text-on-accent-secondary:var(--reading-accent-muted);
  --status-neutral:#393939;
  --status-warning:#d2a106;
  --status-success:#24a148;
  --status-text:#f4f4f4;
  --inverse-background:#0f0f0f;
  --inverse-layer:#161616;
  --inverse-text:#f4f4f4;
  --inverse-secondary:#c6c6c6;
  --inverse-border:#393939;
  --selection-bg:#0043ce;
  --selection-text:#ffffff;
  --overlay:rgba(0,0,0,.56);
  --panel-shadow:rgba(0,0,0,.42);
  --border:var(--border-subtle);
  --status-bg:var(--status-neutral);
  --button-primary-text:var(--text-inverse);
  color-scheme:dark;
}