/* Generated at build time from config/site.yml (`colors:` and `fonts:`)
   -- edit the config and rebuild, don't edit this file by hand. */
:root {
  --banner-title-font: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --banner-claim-font: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --banner-title-size: 45px;
  --banner-claim-size: 20px;
}

:root,
:root[data-theme="light"] {
  --bg: #edf2f7;
  --card-bg: #ffffff;
  --footer-bg: #dce8f2;
  --text: #444a5a;
  --meta-text: #8090a4;
  --accent: #1a5fa0;
  --nav-bg: #dce8f2;
  --nav-text: #444a5a;
  --border: #c8d8ea;
  --nav-border: #8090a4;
  --pill-bg: #ccddf0;
  --search-bg: #ffffff;
  --hover-invert: #8090a4;
  --badge-hover-text: #ffffff;
  --banner-title-color: #dce8f2;
  --banner-claim-color: #dce8f2;
}

/* WARNING: the dark values appear twice below and must stay identical.
   CSS can't share a declaration block across an @media boundary, so
   "follow the system" and "explicitly switched" can't be written
   together. (A single declaration would be possible via light-dark(),
   but that needs Safari 17.5+ / Chrome 123+, and colors would fall
   apart completely in older browsers.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111111;
    --card-bg: #102030;
    --footer-bg: #111111;
    --text: #b0c8de;
    --meta-text: #6888a4;
    --accent: #4a9fd4;
    --nav-bg: #102030;
    --nav-text: #b0c8de;
    --border: #203040;
    --nav-border: #6888a4;
    --pill-bg: #162438;
    --search-bg: #eeeeee;
    --hover-invert: #ffffff;
    --badge-hover-text: var(--accent);
    --banner-title-color: #ffffff;
    --banner-claim-color: #ffffff;
  }
}

:root[data-theme="dark"] {
  --bg: #111111;
  --card-bg: #102030;
  --footer-bg: #111111;
  --text: #b0c8de;
  --meta-text: #6888a4;
  --accent: #4a9fd4;
  --nav-bg: #102030;
  --nav-text: #b0c8de;
  --border: #203040;
  --nav-border: #6888a4;
  --pill-bg: #162438;
  --search-bg: #eeeeee;
  --hover-invert: #ffffff;
  --badge-hover-text: var(--accent);
  --banner-title-color: #ffffff;
  --banner-claim-color: #ffffff;
}