/* Brand bridge for Digital Room WooCommerce Experience.
   Maps theme tokens to the plugin tokens: a child theme can set --ct-* (legacy)
   or the framework --drf-* tokens; the parent theme always provides --drf-*. */

:root {
  --drwe-font: var(--dr-font-body, var(--drf-font-body, "Manrope")), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --drwe-font-display: var(--drwe-font);

  --drwe-bg: var(--ct-color-page-bg, var(--drf-color-bg, var(--drwe-c-tint, #fdfcfe)));
  --drwe-surface: var(--ct-surface, var(--drf-color-surface, #ffffff));
  --drwe-surface-soft: var(--ct-surface-warm, var(--drf-color-surface-alt, #fbf7ed));
  --drwe-border: var(--ct-border, var(--drf-color-border, var(--drwe-c-line, #e6dde9)));
  --drwe-border-strong: var(--ct-border-strong, var(--drf-color-border, var(--drwe-c-line, #d7cadc)));
  --drwe-text: var(--ct-heading, var(--drf-color-text, #2f2936));
  --drwe-text-soft: var(--ct-body, var(--drf-color-text, #4f4656));
  --drwe-muted: var(--ct-muted, var(--drf-color-muted, #716a78));
  --drwe-muted-2: var(--ct-brand-placeholder, var(--drf-color-muted, #958a9b));
  --drwe-primary: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
  --drwe-primary-hover: var(--ct-primary-dark, var(--drf-color-brand-hover, var(--drf-color-primary-hover, var(--drwe-c-deep, #5c3e83))));
  --drwe-primary-soft: var(--ct-lavender, var(--drf-color-surface-alt, var(--drwe-c-soft, #f4eff7)));
  --drwe-accent: var(--ct-primary-soft, var(--drf-color-accent, var(--drwe-c-mid, #a88cbc)));
  --drwe-button: var(--ct-button-buy-bg, var(--drf-color-accent, #f3d46f));
  --drwe-button-text: var(--ct-button-buy-text, var(--drf-color-text, #2f2936));
  --drwe-success: var(--ct-success, var(--drf-color-success, #4f7a61));
  --drwe-success-soft: var(--ct-notice-success-bg, var(--drf-color-surface-alt, #edf5f0));
  --drwe-warning: var(--ct-warning, var(--drf-color-warning, #b27a2a));
  --drwe-warning-soft: var(--ct-peach, var(--drf-color-surface-alt, #fbf5df));
  --drwe-danger: var(--ct-danger, var(--drf-color-danger, #b65555));
  --drwe-danger-soft: var(--ct-notice-error-bg, var(--drf-color-surface-alt, #f8eceb));
  --drwe-info: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
  --drwe-info-soft: var(--ct-lavender, var(--drf-color-surface-alt, var(--drwe-c-soft, #f4eff7)));
  --drwe-shadow-sm: var(--ct-shadow-card, var(--drf-shadow-sm, 0 6px 18px color-mix(in srgb, var(--drwe-c-ink, rgb(40,20,60)) 4%, transparent)));
  --drwe-shadow-md: var(--ct-shadow-soft, var(--drf-shadow-md, 0 8px 22px color-mix(in srgb, var(--drwe-c-ink, rgb(40,20,60)) 5%, transparent)));
  --drwe-shadow-lg: var(--ct-shadow-elevated, var(--drf-shadow-lg, 0 16px 36px color-mix(in srgb, var(--drwe-c-ink, rgb(40,20,60)) 7%, transparent)));
  --drwe-focus: 0 0 0 3px color-mix(in srgb, var(--drwe-primary) 18%, transparent);

  --dr-bg: var(--drwe-bg);
  --dr-surface: var(--drwe-surface);
  --dr-surface-2: var(--drwe-surface-soft);
  --dr-border: var(--drwe-border);
  --dr-border-strong: var(--drwe-border-strong);
  --dr-text: var(--drwe-text);
  --dr-text-soft: var(--drwe-text-soft);
  --dr-muted: var(--drwe-muted);
  --dr-muted-2: var(--drwe-muted-2);
  --dr-primary: var(--drwe-primary);
  --dr-primary-hover: var(--drwe-primary-hover);
  --dr-primary-soft: var(--drwe-primary-soft);
  --dr-success: var(--drwe-success);
  --dr-success-soft: var(--drwe-success-soft);
  --dr-warning: var(--drwe-warning);
  --dr-warning-soft: var(--drwe-warning-soft);
  --dr-error: var(--drwe-danger);
  --dr-error-soft: var(--drwe-danger-soft);
  --dr-shadow-card: var(--drwe-shadow-lg);
  --dr-shadow-soft: var(--drwe-shadow-md);
  --dr-focus: 0 0 0 4px color-mix(in srgb, var(--dr-primary) 14%, transparent);
  --dr-font: var(--drwe-font);
  --dr-container: var(--drfc-site-container, 1440px);
}

body.drwe-flow-page,
body.drwe-cart-page,
body.drwe-checkout-page,
body.drwe-surface-thank-you-page,
.dr-checkout-page,
.dr-cart-shell,
.dr-ty-shell {
  --dr-bg: var(--ct-color-page-bg, var(--drf-color-bg, #ffffff));
  --dr-surface: var(--ct-surface, var(--drf-color-surface, #ffffff));
  --dr-surface-2: var(--ct-surface-warm, var(--drf-color-surface-alt, #fff9ef));
  --dr-border: var(--ct-border, var(--drf-color-border, var(--drwe-c-line, #e6dde9)));
  --dr-border-strong: var(--ct-border-strong, var(--drf-color-border, var(--drwe-c-line, #d7cadc)));
  --dr-text: var(--ct-heading, var(--drf-color-text, #2f2936));
  --dr-text-soft: var(--ct-body, var(--drf-color-text, #4f4656));
  --dr-muted: var(--ct-muted, var(--drf-color-muted, #716a78));
  --dr-muted-2: var(--ct-brand-placeholder, var(--drf-color-muted, #a696b1));
  --dr-primary: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
  --dr-primary-hover: var(--ct-primary-dark, var(--drf-color-brand-hover, var(--drf-color-primary-hover, var(--drwe-c-deep, #5c3e83))));
  --dr-primary-soft: var(--ct-lavender, var(--drf-color-surface-alt, var(--drwe-c-soft, #f4eff7)));
  --dr-success: var(--ct-success, var(--drf-color-success, #4f7a61));
  --dr-success-soft: var(--ct-notice-success-bg, var(--drf-color-surface-alt, #eaf8f0));
  --dr-warning: var(--ct-warning, var(--drf-color-warning, #ffb400));
  --dr-warning-soft: var(--ct-peach, var(--drf-color-surface-alt, #fbf5df));
  --dr-error: var(--ct-danger, var(--drf-color-danger, #b65555));
  --dr-error-soft: var(--ct-notice-error-bg, var(--drf-color-surface-alt, #f8eceb));
  --dr-shadow-card: var(--ct-shadow-elevated, var(--drf-shadow-lg, 0 16px 36px color-mix(in srgb, var(--drwe-c-ink, rgb(40,20,60)) 7%, transparent)));
  --dr-shadow-soft: var(--ct-shadow-soft, var(--drf-shadow-md, 0 8px 22px color-mix(in srgb, var(--drwe-c-ink, rgb(40,20,60)) 5%, transparent)));
  --dr-focus: 0 0 0 4px color-mix(in srgb, var(--dr-primary) 14%, transparent);
  --dr-font: var(--drwe-font);
  --dr-container: var(--drfc-site-container, 1440px);
  font-family: var(--drwe-font);
}

body.drwe-cart-page,
body.drwe-checkout-page,
body.drwe-surface-thank-you-page,
body.drwe-account-page,
body.woocommerce-account {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399)))) 9%, transparent), transparent 34%),
    radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--ct-buy, #f3d46f) 10%, transparent), transparent 30%),
    var(--ct-color-page-bg, var(--drf-color-bg, #ffffff)) !important;
  color: var(--ct-heading, var(--drf-color-text, #2f2936));
}

body.drwe-flow-page .drwe-focus-header,
.drwe-focus-header {
  background: color-mix(in srgb, var(--ct-surface, var(--drf-color-surface, #ffffff)) 94%, transparent);
  border-bottom-color: var(--ct-border, var(--drf-color-border, var(--drwe-c-line, #e6dde9)));
  box-shadow: var(--ct-shadow-soft, var(--drf-shadow-md, 0 8px 22px color-mix(in srgb, var(--drwe-c-ink, rgb(40,20,60)) 5%, transparent)));
  font-family: var(--drwe-font);
}

.drwe-focus-brand,
.drwe-focus-brand__text strong {
  color: var(--ct-heading, var(--drf-color-text, #2f2936));
}

.drwe-focus-brand__mark {
  background: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
  color: var(--ct-surface, var(--drf-color-surface, #ffffff));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399)))) 20%, transparent);
}

.drwe-focus-brand__text small,
.drwe-focus-step,
.drwe-focus-footer__inner {
  color: var(--ct-muted, var(--drf-color-muted, #716a78));
}

.drwe-focus-steps {
  background: var(--ct-lavender, var(--drf-color-surface-alt, var(--drwe-c-soft, #f4eff7)));
  border-color: var(--ct-border, var(--drf-color-border, var(--drwe-c-line, #e6dde9)));
}

.drwe-focus-step__dot {
  background: var(--ct-border, var(--drf-color-border, var(--drwe-c-line, #e6dde9)));
  color: var(--ct-body, var(--drf-color-text, #4f4656));
}

.drwe-focus-step.is-done,
.drwe-focus-secure {
  color: var(--ct-success, var(--drf-color-success, #4f7a61));
}

.drwe-focus-step.is-done .drwe-focus-step__dot,
.drwe-focus-secure {
  background: var(--ct-notice-success-bg, var(--drf-color-surface-alt, #eaf8f0));
}

.drwe-focus-step.is-active {
  background: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
  color: var(--ct-surface, var(--drf-color-surface, #ffffff));
}

.drwe-focus-step.is-active .drwe-focus-step__dot {
  background: var(--ct-buy, #f3d46f);
  color: var(--ct-buy-text, #2f2936);
}

.drwe-focus-back,
.drwe-focus-help {
  background: var(--ct-surface, var(--drf-color-surface, #ffffff));
  border-color: var(--ct-border, var(--drf-color-border, var(--drwe-c-line, #e6dde9)));
  color: var(--ct-body, var(--drf-color-text, #4f4656));
}

.drwe-focus-back:hover,
.drwe-focus-help:hover {
  border-color: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
  color: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
}

.drwe-focus-footer {
  background: var(--ct-surface, var(--drf-color-surface, #ffffff));
  border-top-color: var(--ct-border, var(--drf-color-border, var(--drwe-c-line, #e6dde9)));
}

body.drwe-account-page,
body.woocommerce-account {
  --dr-acc-bg: var(--ct-color-page-bg, var(--drf-color-bg, #ffffff));
  --dr-acc-surface: var(--ct-surface, var(--drf-color-surface, #ffffff));
  --dr-acc-surface-soft: var(--ct-surface-warm, var(--drf-color-surface-alt, #fff9ef));
  --dr-acc-surface-muted: var(--ct-lavender, var(--drf-color-surface-alt, var(--drwe-c-soft, #f4eff7)));
  --dr-acc-text: var(--ct-heading, var(--drf-color-text, #2f2936));
  --dr-acc-muted: var(--ct-body, var(--drf-color-text, #4f4656));
  --dr-acc-soft: var(--ct-muted, var(--drf-color-muted, #716a78));
  --dr-acc-border: var(--ct-border, var(--drf-color-border, var(--drwe-c-line, #e6dde9)));
  --dr-acc-border-strong: var(--ct-border-strong, var(--drf-color-border, var(--drwe-c-line, #d7cadc)));
  --dr-acc-primary: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
  --dr-acc-primary-hover: var(--ct-primary-dark, var(--drf-color-brand-hover, var(--drf-color-primary-hover, var(--drwe-c-deep, #5c3e83))));
  --dr-acc-primary-soft: var(--ct-lavender, var(--drf-color-surface-alt, var(--drwe-c-soft, #f4eff7)));
  --dr-acc-accent: var(--ct-primary-soft, var(--drf-color-accent, var(--drwe-c-mid, #a88cbc)));
  --dr-acc-accent-hover: var(--ct-primary-dark, var(--drf-color-brand-hover, var(--drf-color-primary-hover, var(--drwe-c-deep, #5c3e83))));
  --dr-acc-accent-soft: var(--ct-lavender, var(--drf-color-surface-alt, var(--drwe-c-soft, #f4eff7)));
  --dr-acc-success: var(--ct-success, var(--drf-color-success, #4f7a61));
  --dr-acc-warning: var(--ct-warning, var(--drf-color-warning, #ffb400));
  --dr-acc-danger: var(--ct-danger, var(--drf-color-danger, #b65555));
  --dr-acc-shadow-sm: var(--ct-shadow-card, var(--drf-shadow-sm, 0 6px 18px color-mix(in srgb, var(--drwe-c-ink, rgb(40,20,60)) 4%, transparent)));
  --dr-acc-shadow-md: var(--ct-shadow-soft, var(--drf-shadow-md, 0 8px 22px color-mix(in srgb, var(--drwe-c-ink, rgb(40,20,60)) 5%, transparent)));
  --dr-acc-shadow-lg: var(--ct-shadow-elevated, var(--drf-shadow-lg, 0 16px 36px color-mix(in srgb, var(--drwe-c-ink, rgb(40,20,60)) 7%, transparent)));
  --dr-acc-container: var(--drfc-site-container, 1440px);
}

body.drwe-account-page,
body.drwe-account-page button,
body.drwe-account-page input,
body.drwe-account-page select,
body.drwe-account-page textarea,
body.woocommerce-account,
body.woocommerce-account button,
body.woocommerce-account input,
body.woocommerce-account select,
body.woocommerce-account textarea,
.drwe-card,
.drwe-btn,
.dr-account {
  font-family: var(--drwe-font);
}

.drwe-btn--primary,
.dr-btn-primary,
.dr-cart-btn-primary,
.dr-checkout-page .button.alt,
.dr-checkout-page #place_order {
  background: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399)))) !important;
  border-color: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399)))) !important;
  color: var(--ct-surface, var(--drf-color-surface, #ffffff)) !important;
}

.drwe-btn--primary:hover,
.dr-btn-primary:hover,
.dr-cart-btn-primary:hover,
.dr-checkout-page .button.alt:hover,
.dr-checkout-page #place_order:hover {
  background: var(--ct-primary-dark, var(--drf-color-brand-hover, var(--drf-color-primary-hover, var(--drwe-c-deep, #5c3e83)))) !important;
  border-color: var(--ct-primary-dark, var(--drf-color-brand-hover, var(--drf-color-primary-hover, var(--drwe-c-deep, #5c3e83)))) !important;
}

.drwe-btn--secondary,
.dr-btn-secondary {
  color: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399)))) !important;
  border-color: var(--ct-border-strong, var(--drf-color-border, var(--drwe-c-line, #d7cadc))) !important;
  background: var(--ct-surface, var(--drf-color-surface, #ffffff)) !important;
}

.dr-mini-btn:hover {
  background: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
  border-color: var(--ct-primary, var(--drf-color-brand, var(--drf-color-primary, var(--drwe-c-brand, #806399))));
}