/* Shared public-site settings supplied by the CMS. */
:root {
  --container-radius: clamp(10px, 1.4vw, 18px);
  /* Both header and footer marks resolve to the same WebP variants, so the
     first paint costs one 23 KB request instead of a 52 KB PNG plus the
     variants — and the <link rel=preload> in each page matches it exactly. */
  --brand-logo: var(--brand-logo-default);
  --brand-logo-default: image-set(
    url("/uploads/brand/variants/bluamoeba-logo-dark-640.webp") 1x,
    url("/uploads/brand/variants/bluamoeba-logo-dark-1186.webp") 2x
  );
  --brand-logo-on-light: var(--brand-logo-default);
  --brand-logo-on-dark: image-set(
    url("/uploads/brand/variants/bluamoeba-logo-reverse-640.webp") 1x,
    url("/uploads/brand/variants/bluamoeba-logo-reverse-1186.webp") 2x
  );
}

.brand-mark {
  background-image: var(--brand-logo-on-light) !important;
}

html[data-brand-surface="light"] header .brand-mark {
  background-image: var(--brand-logo-on-light) !important;
}

html[data-brand-surface="dark"] header .brand-mark {
  background-image: var(--brand-logo-on-dark) !important;
}