body {
  --froggy-heading:                var(--wp--preset--color--heading);
  --froggy-bodytext:               var(--wp--preset--color--contrast);
  --froggy-accent:                 var(--wp--preset--color--accent);
  --froggy-btn-primary-bg:         var(--wp--preset--color--contrast);
  --froggy-btn-primary-text:       var(--wp--preset--color--base);
  --froggy-btn-secondary-bg-hover: color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
  --froggy-btn-secondary-border:   var(--wp--preset--color--borders);
  --froggy-btn-secondary-text:     var(--wp--preset--color--contrast);
  --froggy-card-bg:                color-mix(in srgb, var(--wp--preset--color--contrast) 12%, var(--wp--preset--color--base));
  --froggy-placeholder-bg:         color-mix(in srgb, var(--wp--preset--color--contrast) 12%, var(--wp--preset--color--surface));
  --froggy-placeholder-bg-hover:   color-mix(in srgb, var(--wp--preset--color--contrast) 18%, var(--wp--preset--color--surface));
}

.has-content-background {
  background-color:                var(--wp--preset--color--base);
}