/* Display mode. The server sets data-theme before first paint.
   Automatic follows prefers-color-scheme and updates if it changes. */
:root[data-theme="light"],
:root[data-theme="auto"]{
  color-scheme:light;
  --bg:#f3f5f7;
  --panel:#ffffff;
  --card:#ffffff;
  --line:#dce3e8;
  --text:#172025;
  --ink:#172025;
  --muted:#5d6c78;
  --accent:#24343f;
  --on-accent:#ffffff;
  --link:#174b70;
  --good:#16734f;
  --bad:#aa3040;
  --warn:#8f5a00;
  --notice-bg:#e9eef2;
  --notice-line:#687e8e;
  --notice-error-bg:#fff0f1;
  --notice-error-line:#bb3444;
  --header-bg:#172025;
  --header-text:#ffffff;
  --header-muted:#cbd4da;
  --header-border:#c5d0d8;
  --surface-tab:#e7edf1;
  --surface-tab-text:#3d4f5c;
  --surface-tab-hover:#f4f7f9;
  --surface-tab-border:#dce3e8;
  --surface-tab-hover-border:#dce3e8;
  --surface-tab-selected-border:#dce3e8;
  --header-tab:#314552;
  --header-tab-text:#e7eef3;
  --header-tab-border:#8aa0b0;
  --header-tab-hover:#3d5568;
  --header-tab-hover-text:#ffffff;
  --header-tab-hover-border:#8aa0b0;
  --header-tab-selected-border:var(--header-border);
  --input-bg:#ffffff;
  --disabled-bg:#f1f4f6;
  --disabled-text:#3e505e;
  --inset:#f3f5f7;
  --selected:#edf1f4;
  --pre-bg:#ffffff;
  --focus:#174b70;
  --danger:#aa3040;
  --danger-line:#dfb4bc;
  --backdrop:#10202ccc;
}

@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    color-scheme:dark;
    --bg:#101820;
    --panel:#1b2832;
    --card:#1b2832;
    --line:#3c4e5c;
    --text:#e7eef3;
    --ink:#e7eef3;
    --muted:#b7c4ce;
    --accent:#d7e3ec;
    --on-accent:#102028;
    --link:#9dc8ea;
    --good:#79d7a4;
    --bad:#ffb1b1;
    --warn:#ffc56d;
    --notice-bg:#24323c;
    --notice-line:#8aa0b0;
    --notice-error-bg:#3f262c;
    --notice-error-line:#ff9aa6;
    --header-bg:#0c1218;
    --header-text:#ffffff;
    --header-muted:#cbd4da;
    --header-border:#2c3c48;
    --header-tab-baseline:#6a8496;
    --surface-tab:#121a22;
    --surface-tab-text:#c5d2db;
    --surface-tab-hover:#1e2c38;
    --surface-tab-border:#2a3c48;
    --surface-tab-hover-border:#4d6576;
    --surface-tab-selected-border:#8aa0b0;
    --header-tab:#15202a;
    --header-tab-text:#c5d3dc;
    --header-tab-border:#2a3c48;
    --header-tab-hover:#243644;
    --header-tab-hover-text:#ffffff;
    --header-tab-hover-border:#4d6576;
    --header-tab-selected-border:#8aa0b0;
    --input-bg:#121b22;
    --disabled-bg:#24303a;
    --disabled-text:#c5d2db;
    --inset:#121b22;
    --selected:#243640;
    --pre-bg:#121b22;
    --focus:#f8d981;
    --danger:#ffb1b1;
    --danger-line:#8a4a54;
    --backdrop:#000000b3;
  }
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101820;
  --panel:#1b2832;
  --card:#1b2832;
  --line:#3c4e5c;
  --text:#e7eef3;
  --ink:#e7eef3;
  --muted:#b7c4ce;
  --accent:#d7e3ec;
  --on-accent:#102028;
  --link:#9dc8ea;
  --good:#79d7a4;
  --bad:#ffb1b1;
  --warn:#ffc56d;
  --notice-bg:#24323c;
  --notice-line:#8aa0b0;
  --notice-error-bg:#3f262c;
  --notice-error-line:#ff9aa6;
  --header-bg:#0c1218;
  --header-text:#ffffff;
  --header-muted:#cbd4da;
  --header-border:#2c3c48;
  --header-tab-baseline:#6a8496;
  --surface-tab:#121a22;
  --surface-tab-text:#c5d2db;
  --surface-tab-hover:#1e2c38;
  --surface-tab-border:#2a3c48;
  --surface-tab-hover-border:#4d6576;
  --surface-tab-selected-border:#8aa0b0;
  --header-tab:#15202a;
  --header-tab-text:#c5d3dc;
  --header-tab-border:#2a3c48;
  --header-tab-hover:#243644;
  --header-tab-hover-text:#ffffff;
  --header-tab-hover-border:#4d6576;
  --header-tab-selected-border:#8aa0b0;
  --input-bg:#121b22;
  --disabled-bg:#24303a;
  --disabled-text:#c5d2db;
  --inset:#121b22;
  --selected:#243640;
  --pre-bg:#121b22;
  --focus:#f8d981;
  --danger:#ffb1b1;
  --danger-line:#8a4a54;
  --backdrop:#000000b3;
}

::placeholder{color:var(--muted);opacity:1}