@import url('/static/css/funnel-theme-inheritance.css');
@import url('/static/css/funnel-theme-checkout.css');
@import url('/static/css/funnel-theme-checkout-controls.css');

/* Tailwind owns defaults/mode; recompute derived surfaces at each owner boundary. */
:where(.funnel-theme, [data-funnel-renderer="2"], [data-funnel-theme-owner]) {
  --funnel-surface: color-mix(in srgb, var(--funnel-canvas) 94%, var(--funnel-text));
  --funnel-surface-muted: color-mix(in srgb, var(--funnel-canvas) 90%, var(--funnel-primary));
  --funnel-border: color-mix(in srgb, var(--funnel-text) 14%, var(--funnel-canvas));
  --funnel-primary-hover: color-mix(in srgb, var(--funnel-primary) 82%, var(--funnel-text));
  background-color: var(--funnel-canvas);
  color: var(--funnel-text);
  font-family: var(--funnel-font-family, inherit);
  font-size: var(--funnel-font-size, inherit);
}

:where(.funnel-theme-section, .spotless-imported-surface) {
  background-color: transparent;
  background-image: none;
  color: var(--funnel-text, inherit);
  font-family: inherit;
}

:where(.funnel-theme-heading) {
  color: var(--funnel-text, inherit);
  font-family: var(--funnel-heading-family, inherit);
}

:where(.funnel-theme-muted) { color: var(--funnel-text-muted, inherit); }
:where(.funnel-theme-emphasis) { color: var(--funnel-primary, inherit); }

:where(.funnel-theme-marker) {
  background-color: var(--funnel-primary, transparent);
  color: var(--funnel-canvas, inherit);
}

:where(.funnel-theme-card) {
  background-color: var(--funnel-surface, transparent);
  color: var(--funnel-text, inherit);
  border: 1px solid var(--funnel-border, currentColor);
  border-radius: var(--funnel-radius-card, inherit);
}

:where(.funnel-theme-section a, .funnel-theme-section button,
  .spotless-imported-surface a, .spotless-imported-surface button):focus-visible {
  outline: 3px solid var(--funnel-primary, currentColor);
  outline-offset: 4px;
}