.dt-framed-callout {
  /* Vars with safe defaults */
  --_border-color: var(--dt-fc-border-color, #0BA5A4);
  --_border-width: var(--dt-fc-border-width, 8px);
  --_radius: var(--dt-fc-radius, 8px);
  --_padding: var(--dt-fc-padding, 20px);
  --_bg-color: var(--dt-fc-bg-color, #F7F5EF);
  --_bg-alpha: var(--dt-fc-bg-opacity, 1);

  display: inline-block;
  box-sizing: border-box;

  border: var(--_border-width) solid var(--_border-color);
  border-radius: var(--_radius);
  padding: var(--_padding);

  /* Fallback that always works */
  background-color: rgba(247, 245, 239, var(--_bg-alpha));
}

/* Enhancement: if your page supports color-mix, this will match the chosen colour exactly */
@supports (background: color-mix(in srgb, #000 0%, #fff)) {
  .dt-framed-callout {
    background: color-mix(in srgb, var(--_bg-color) calc(var(--_bg-alpha) * 100%), transparent);
  }
}