/* 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: ui-sans-serif, system-ui, sans-serif;
  --banner-claim-font: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --banner-title-size: 18px;
  --banner-claim-size: 20px;
}

:root,
:root[data-theme="light"] {
  --bg: #ffffff;
  --card-bg: #ffffff;
  --text: #334155;
  --meta-text: #64748b;
  --accent: #1d4ed8;
  --nav-bg: #ffffff;
  --nav-text: #334155;
  --border: #cbd5e1;
  --nav-border: #64748b;
  --pill-bg: #dbeafe;
  --search-bg: #ffffff;
  --hover-invert: #64748b;
  --badge-hover-text: #ffffff;
  --banner-title-color: #ffffff;
  --banner-claim-color: #ffffff;
}

/* 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: #1e293b;
    --card-bg: #1e293b;
    --text: #cbd5e1;
    --meta-text: #94a3b8;
    --accent: #60a5fa;
    --nav-bg: #1e293b;
    --nav-text: #cbd5e1;
    --border: #475569;
    --nav-border: #94a3b8;
    --pill-bg: #1e3a5f;
    --search-bg: #eeeeee;
    --hover-invert: #ffffff;
    --badge-hover-text: var(--accent);
    --banner-title-color: #ffffff;
    --banner-claim-color: #ffffff;
  }
}

:root[data-theme="dark"] {
  --bg: #1e293b;
  --card-bg: #1e293b;
  --text: #cbd5e1;
  --meta-text: #94a3b8;
  --accent: #60a5fa;
  --nav-bg: #1e293b;
  --nav-text: #cbd5e1;
  --border: #475569;
  --nav-border: #94a3b8;
  --pill-bg: #1e3a5f;
  --search-bg: #eeeeee;
  --hover-invert: #ffffff;
  --badge-hover-text: var(--accent);
  --banner-title-color: #ffffff;
  --banner-claim-color: #ffffff;
}