/* Dark palette, shared by the system preference and the manual override. */
@media(prefers-color-scheme: dark) {

  :root:not([data-theme]) {
    --color-text: 226, 232, 235;
    --color-background: 18, 26, 31;
    --color-link: 226, 232, 235;
    --color-code-background: 27, 37, 43;
    --color-syntax-comment: 124, 142, 150;
    --color-syntax-keyword: 222, 138, 205;
    --color-syntax-string: 126, 209, 168;
    --color-syntax-number: 235, 165, 110;
    --color-syntax-attribute: 130, 178, 240;
    --color-syntax-variable: 240, 138, 138;
    --color-syntax-function: 130, 178, 240;
  }

}

:root[data-theme="dark"] {
  --color-text: 226, 232, 235;
  --color-background: 18, 26, 31;
  --color-link: 226, 232, 235;
  --color-code-background: 27, 37, 43;
  --color-syntax-comment: 124, 142, 150;
  --color-syntax-keyword: 222, 138, 205;
  --color-syntax-string: 126, 209, 168;
  --color-syntax-number: 235, 165, 110;
  --color-syntax-attribute: 130, 178, 240;
  --color-syntax-variable: 240, 138, 138;
  --color-syntax-function: 130, 178, 240;
}

:root[data-theme="light"] {
  --color-text: 29, 45, 53;
  --color-background: 255, 255, 255;
  --color-link: 29, 45, 53;
  --color-code-background: 244, 246, 247;
  --color-syntax-comment: 122, 138, 145;
  --color-syntax-keyword: 165, 60, 138;
  --color-syntax-string: 38, 130, 95;
  --color-syntax-number: 184, 96, 32;
  --color-syntax-attribute: 41, 98, 168;
  --color-syntax-variable: 192, 64, 64;
  --color-syntax-function: 41, 98, 168;
}

body {
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}