:root {
  color-scheme: light dark;

  --chrome-brown: #C1A884;

  --text-color: light-dark(#333, #CFC9C0);
  --bg-color: light-dark(#FFF, #100E0D);
  --body-bg: light-dark(#FFF, #0C0A08);
  --link-color: light-dark(#8E4740, #C67467);
  --border-color: light-dark(#E0DBD4, #38332D);
  --code-bg: light-dark(#F5F3EE, #1A1816);
  --code-fg: light-dark(#5D662E, #A8B36B);
  --heading-color: light-dark(#7A4A2A, #D9B87C);
  --blockquote-color: light-dark(#8A7B68, #9A8C7C);
  --blockquote-border: light-dark(#DCD6CE, #3D3731);

  --syntax-comment: light-dark(#9A7A4A, #B8A06A);
  --syntax-number: light-dark(#705D73, #947E96);
  --syntax-function: light-dark(#9A5435, #C98A60);
  --syntax-type: light-dark(#7A4A2A, #D4A06A);
  --syntax-constant: light-dark(#705D73, #947E96);
  --syntax-keyword: light-dark(#7A4A2A, #D4A06A);
  --syntax-string: var(--code-fg);
  --syntax-variable: var(--text-color);
  --syntax-operator: var(--text-color);
  --syntax-punctuation: var(--text-color);

  --alert-note-border: light-dark(#0969da, #4493f8);
  --alert-note-title: light-dark(#0969da, #4493f8);
  --alert-tip-border: light-dark(#1a7f37, #3fb950);
  --alert-tip-title: light-dark(#1a7f37, #3fb950);
  --alert-important-border: light-dark(#8250df, #ab7df8);
  --alert-important-title: light-dark(#8250df, #ab7df8);
  --alert-warning-border: light-dark(#9a6700, #d29922);
  --alert-warning-title: light-dark(#9a6700, #d29922);
  --alert-caution-border: light-dark(#d1242f, #f85149);
  --alert-caution-title: light-dark(#d1242f, #f85149);
  --alert-status-border: light-dark(#ff7700, #ff6600);
  --alert-status-title: light-dark(#ff7700, #ff6600);
}


:root.is-bright { color-scheme: light; }
:root.is-dark   { color-scheme: dark; }


:root {
  --chrome-shot-bright: url('../img/header-chrome-light.png');
  --chrome-shot-dark: url('../img/header-chrome-dark.png');

  --chrome-shape-bright: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='688' viewBox='0 0 2000 688'%3E%3Cpath d='M115.5 162.8c0-20.4.1-27.3.7-34.8.8-9.1 2.3-15.4 5-20.8 5.1-9.9 13.1-17.9 23-23 5.4-2.7 11.7-4.2 20.8-5 7.5-.6 14.4-.7 34.8-.7h1600.4c20.4 0 27.3.1 34.8.7 9.1.8 15.4 2.3 20.8 5 9.9 5.1 17.9 13.1 23 23 2.7 5.4 4.2 11.7 5 20.8.6 7.5.7 14.4.7 34.8v537.2h-1769z' fill='%23FFF' stroke='%236D7278'/%3E%3C/svg%3E");
  --chrome-shape-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='688' viewBox='0 0 2000 688'%3E%3Cpath d='M115.5 162.8c0-20.4.1-27.3.7-34.8.8-9.1 2.3-15.4 5-20.8 5.1-9.9 13.1-17.9 23-23 5.4-2.7 11.7-4.2 20.8-5 7.5-.6 14.4-.7 34.8-.7h1600.4c20.4 0 27.3.1 34.8.7 9.1.8 15.4 2.3 20.8 5 9.9 5.1 17.9 13.1 23 23 2.7 5.4 4.2 11.7 5 20.8.6 7.5.7 14.4.7 34.8v537.2h-1769z' fill='%23100E0D' stroke='%23444'/%3E%3C/svg%3E");

  --chrome-down-bright: none;
  --chrome-down-dark: none;

  --header-chrome: var(--chrome-shot-bright);
  --header-chrome-shape: var(--chrome-shape-bright);
  --header-chrome-down: var(--chrome-down-bright);
}

:root.is-down {
  --chrome-down-bright: url('../img/header-chrome-light-down.png');
  --chrome-down-dark: url('../img/header-chrome-dark-down.png');
}

@media (prefers-color-scheme: dark) {
  :root {
    --header-chrome: var(--chrome-shot-dark);
    --header-chrome-shape: var(--chrome-shape-dark);
    --header-chrome-down: var(--chrome-down-dark);
  }
}

:root.is-bright {
  --header-chrome: var(--chrome-shot-bright);
  --header-chrome-shape: var(--chrome-shape-bright);
  --header-chrome-down: var(--chrome-down-bright);
}

:root.is-dark {
  --header-chrome: var(--chrome-shot-dark);
  --header-chrome-shape: var(--chrome-shape-dark);
  --header-chrome-down: var(--chrome-down-dark);
}