/* Tokens according to design document 025 Stijlboek, chapters 2 to 4.
   Another house style only changes these tokens. */
:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f1f4fb;
  --line: #e2e7f2;
  --line-2: #edf0f7;
  --fg: #16213d;
  --fg-2: #5b6683;
  --fg-3: #8b94ad;
  --accent: #1d4ed8;
  --accent-soft: #e6edfd;
  --accent-fg: #ffffff;
  --ok: #15803d;      --ok-soft: #e5f6ea;
  --warn: #a15c00;    --warn-soft: #fff3d6;
  --bad: #c42b45;     --bad-soft: #fde8ec;
  --grad-v: linear-gradient(180deg, #16307a 0%, #1a3fa6 45%, #1f55e0 100%);
  --grad-h: linear-gradient(90deg, #15296b 0%, #1a3a96 55%, #1d4ed8 100%);
  --grad-d: linear-gradient(135deg, #163079 0%, #1b45bf 60%, #2259e6 100%);
  --chrome-fg: #ffffff;
  --chrome-2: rgba(255, 255, 255, .14);
  --chrome-line: rgba(255, 255, 255, .22);
  --shadow: 0 1px 3px rgba(22, 48, 122, .06);
  --shadow-dialog: 0 24px 60px rgba(8, 20, 60, .35);
  --r: 10px;
  --r-s: 6px;
  --f-ui: "Helvetica Neue", Helvetica, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --f-mono: Consolas, "Cascadia Mono", "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1430; --surface: #141d3d; --surface-2: #1a2449; --line: #27325a; --line-2: #1f2a50;
    --fg: #eef2ff; --fg-2: #aab4d4; --fg-3: #7782a6;
    --accent: #6b93ff; --accent-soft: #1d2d63; --accent-fg: #0d1430;
    --ok: #5fd38a; --ok-soft: #173a2a; --warn: #f2c661; --warn-soft: #3b3218; --bad: #ff7d92; --bad-soft: #45202b;
    --grad-v: linear-gradient(180deg, #0e1f52 0%, #13308a 55%, #1a46c4 100%);
    --grad-h: linear-gradient(90deg, #0c1a46 0%, #12297a 55%, #1a46c4 100%);
    --grad-d: linear-gradient(135deg, #0c1a46 0%, #13308a 60%, #1a46c4 100%);
    --shadow: 0 1px 3px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1430; --surface: #141d3d; --surface-2: #1a2449; --line: #27325a; --line-2: #1f2a50;
  --fg: #eef2ff; --fg-2: #aab4d4; --fg-3: #7782a6;
  --accent: #6b93ff; --accent-soft: #1d2d63; --accent-fg: #0d1430;
  --ok: #5fd38a; --ok-soft: #173a2a; --warn: #f2c661; --warn-soft: #3b3218; --bad: #ff7d92; --bad-soft: #45202b;
  --grad-v: linear-gradient(180deg, #0e1f52 0%, #13308a 55%, #1a46c4 100%);
  --grad-h: linear-gradient(90deg, #0c1a46 0%, #12297a 55%, #1a46c4 100%);
  --grad-d: linear-gradient(135deg, #0c1a46 0%, #13308a 60%, #1a46c4 100%);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4);
  color-scheme: dark;
}