:root {
  /* Kleur, licht */
  --ql-ink: #1A2229;
  --ql-ink-2: #3A4650;
  --ql-muted: #5F6A73;
  --ql-line: #DAD5CB;
  --ql-line-strong: #8C877D;
  --ql-stone: #ECE8E0;
  --ql-linen: #F7F5F0;
  --ql-surface: #FFFFFF;
  --ql-primary: #1F3B5A;
  --ql-primary-hover: #13253A;
  --ql-primary-tint: #DCE5EF;
  --ql-primary-wash: #EEF2F7;
  --ql-brass: #B8862F;
  --ql-brass-text: #7F5A14;
  --ql-ok: #2E7550;
  --ql-ok-bg: #E4F0E8;
  --ql-warn: #8A5308;
  --ql-warn-fill: #E7A43A;
  --ql-warn-bg: #FBF0DC;
  --ql-err: #B1302B;
  --ql-err-bg: #F8E3E1;

  /* Grafieken, vaste volgorde */
  --ql-chart-1: #1F3B5A;
  --ql-chart-2: #B8862F;
  --ql-chart-3: #3D8A86;
  --ql-chart-4: #A8553A;
  --ql-chart-5: #7A8794;
  --ql-chart-6: #6E7B3A;

  /* Ruimte: phi-reeks */
  --ql-space-1: 4px;
  --ql-space-2: 6px;
  --ql-space-3: 10px;
  --ql-space-4: 16px;
  --ql-space-5: 26px;
  --ql-space-6: 42px;
  --ql-space-7: 68px;
  --ql-space-8: 110px;
  --ql-space-9: 178px;

  /* Hoeken: padding / phi */
  --ql-radius-1: 2px;
  --ql-radius-2: 4px;
  --ql-radius-3: 6px;
  --ql-radius-4: 10px;
  --ql-radius-5: 16px;
  --ql-radius-6: 26px;

  /* Letters: stap sqrt(phi) */
  --ql-font-display: 'IBM Plex Serif', Georgia, serif;
  --ql-font-text: 'IBM Plex Sans', system-ui, sans-serif;
  --ql-font-code: 'IBM Plex Mono', ui-monospace, monospace;
  --ql-size-xs: 13px; --ql-leading-xs: 20px;
  --ql-size-s: 16px; --ql-leading-s: 26px;
  --ql-size-m: 20px; --ql-leading-m: 32px;
  --ql-size-l: 26px; --ql-leading-l: 34px;
  --ql-size-xl: 33px; --ql-leading-xl: 42px;
  --ql-size-2xl: 42px; --ql-leading-2xl: 50px;
  --ql-size-3xl: 54px; --ql-leading-3xl: 62px;
  --ql-size-4xl: 68px; --ql-leading-4xl: 76px;

  --ql-control-h: 44px;
  --ql-page-max: 1178px;
  --ql-split: 1.618fr 1fr;
}

[data-theme="dark"] {
  --ql-ink: #E8E6E1;
  --ql-ink-2: #C9CDD1;
  --ql-muted: #A3ACB4;
  --ql-line: #323C46;
  --ql-line-strong: #5A6672;
  --ql-stone: #232B33;
  --ql-linen: #12171C;
  --ql-surface: #1A2128;
  --ql-primary: #8DB0D6;
  --ql-primary-hover: #B5CDE6;
  --ql-primary-tint: #232B33;
  --ql-primary-wash: #1A2128;
  --ql-brass: #D6A85A;
  --ql-brass-text: #D6A85A;
  --ql-ok: #5FB585;
  --ql-ok-bg: #1E2E26;
  --ql-warn: #E7A43A;
  --ql-warn-fill: #E7A43A;
  --ql-warn-bg: #33291A;
  --ql-err: #E46A62;
  --ql-err-bg: #3A2222;
  --ql-chart-1: #8DB0D6;
  --ql-chart-2: #D6A85A;
  --ql-chart-3: #6CB8B3;
  --ql-chart-4: #D98466;
  --ql-chart-5: #A3ACB4;
  --ql-chart-6: #A9B86A;
}