/* :root:root wins over the inline theme-css-var :root block regardless of head order. */
:root:root {
  --bw-cream: #fcfcfa;
  --bw-ink: #06402d;
  --bw-accent: #51dc70;
  --bw-warm: #fef5ea;
  --bw-card: #f7f7f5;
  --bw-line: #ddddd8;
  --bw-muted: #686868;
  --bw-lime-pale: #f4f8b4;
  --bw-price-olive: #47510e;
  --bw-save-green: #477d06;
  --bw-green-deep: #1c3a13;
  --bw-error: #c20000;

  --bw-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --bw-font-heading: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --bw-font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --bw-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --bw-font-condensed: "Anton", "Arial Narrow", Impact, sans-serif;

  --bw-radius-card: 24px;
  --bw-radius-media: 16px;
  --bw-radius-chip: 20px;
  --bw-radius-pill: 100px;
  --bw-radius-nav: 99px;
  --bw-glass-blur: 24px;
  --bw-glass-nav-blur: 40px;
}

:root:root {
  --sort-title-font: var(--bw-font-display);
  --sort-title-font-style: normal;
  --sort-title-font-weight: 400;
  --sort-title0-font: var(--bw-font-display);
  --sort-title0-font-style: normal;
  --sort-title0-font-weight: 400;
  --sort-title1-font: var(--bw-font-display);
  --sort-title1-font-style: normal;
  --sort-title1-font-weight: 400;
  --sort-title2-font: var(--bw-font-heading);
  --sort-title3-font: var(--bw-font-heading);
  --sort-title4-font: var(--bw-font-heading);
  --sort-title5-font: var(--bw-font-heading);
  --sort-title6-font: var(--bw-font-heading);
  --sort-body-font: var(--bw-font-body);
  --sort-body1-font: var(--bw-font-body);
  --sort-body2-font: var(--bw-font-body);
  --sort-body3-font: var(--bw-font-body);
  --sort-body4-font: var(--bw-font-body);
  --sort-body5-font: var(--bw-font-body);
  --sort-body6-font: var(--bw-font-body);
}

@media (min-width: 960px) {
  :root:root {
    --page-padding: 40px;
  }
}

.accent-italic {
  font-family: var(--bw-font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.bw-mono-label {
  font-family: var(--bw-font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.bw-glass {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--bw-radius-card);
  backdrop-filter: blur(var(--bw-glass-blur));
  -webkit-backdrop-filter: blur(var(--bw-glass-blur));
}

.bw-glass--nav {
  background: rgba(169, 173, 165, 0.35);
  border-radius: var(--bw-radius-nav);
  backdrop-filter: blur(var(--bw-glass-nav-blur));
  -webkit-backdrop-filter: blur(var(--bw-glass-nav-blur));
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .bw-glass {
    background: rgba(6, 64, 45, 0.85);
  }

  .bw-glass--nav {
    background: rgba(86, 96, 82, 0.92);
  }
}

/* Instrument Serif ships weight 400 only: the theme's `+300` bold would render faux. */
:root h1.title-font-bold,
:root h1.body-font-bold,
:root .title0.title-font-bold,
:root .title0.body-font-bold,
:root .title1.title-font-bold,
:root .title1.body-font-bold {
  font-weight: 400 !important;
}

@media (max-width: 959px) {
  :root h1.title-font-bold,
  :root h1.body-font-bold,
  :root .title0.title-font-bold,
  :root .title0.body-font-bold,
  :root .title1.title-font-bold,
  :root .title1.body-font-bold {
    font-weight: 400 !important;
  }
}

.bw-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bw-font-body);
  color: var(--bw-ink);
  background: var(--bw-accent);
  border-radius: var(--bw-radius-chip);
}

.bw-progress {
  width: 100%;
  height: 4px;
  overflow: hidden;
  background: var(--bw-line);
  border-radius: 4px;
}

.bw-progress__fill {
  height: 100%;
  background: var(--bw-accent);
  border-radius: 4px;
}