/**
 * Settings — Design Tokens
 * CSS custom properties scoped to #wppb_wrapper by PostCSS at build time.
 * :root here becomes #wppb_wrapper in output.
 */

#wppb_wrapper {
  /* Colors */
  --wppb-color-primary: #1956BC;
  --wppb-color-primary-dark: #144596;
  --wppb-color-danger: #dc3545;
  --wppb-color-danger-light: rgba(220, 53, 69, 0.1);
  --wppb-color-muted: #6c757d;
  --wppb-color-surface: #f8f9fa;
  --wppb-color-text: #212529; /* base body text; matches Bootstrap --bs-body-color */

  /* Typography */
  --wppb-font-family-base: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", sans-serif;
  --wppb-font-size-sm: 0.875rem;
  --wppb-font-size-base: 1rem;
  --wppb-line-height-base: 1.5;

  /* Spacing */
  --wppb-space-1: 0.25rem;
  --wppb-space-2: 0.5rem;
  --wppb-space-3: 0.75rem;
  --wppb-space-4: 1rem;
  --wppb-space-6: 1.5rem;

  /* Radii */
  --wppb-radius-sm: 4px;
  --wppb-radius-md: 8px;

  /* Z-index */
  --wppb-z-modal: 1050;
  --wppb-z-tooltip: 1100;

  /* Sizing */
  --wppb-max-width: 1340px; /* shared max content width for step containers */
  --wppb-bottom-bar-h: 84px; /* fixed bottom-bar height; consumed for scroll padding */

  /* --- Legacy tokens (consumed by not-yet-decomposed component CSS) --- */

  /* Brand */
  --wppb-primary: #1956BC;
  --wppb-primary-rgb: 25, 86, 188;
  --wppb-primary-hover: #0056b3; /* darker blue for button hover states */
  --wppb-success: #2FDB81;
  --wppb-muted: #6c757d;
  --wppb-gray-light: #f8f9fa;
  --wppb-gray: #e9ecef;
  --wppb-gray-medium: #8B8B8B; /* secondary label text on the bottom bar */
  --wppb-gray-dark: #495057;
  --wppb-text-dark: #212529; /* primary body/heading text */
  --wppb-body-bg: #efefef; /* page surface behind the wrapper / striped panels */
  --wppb-border: #dee2e6;
  --wppb-white: #fff;

  /* Spacing */
  --wppb-spacing-xs: 0.25rem;
  --wppb-spacing-sm: 0.5rem;
  --wppb-spacing-md: 1rem;
  --wppb-spacing-lg: 1.5rem;
  --wppb-spacing-xl: 2rem;

  /* Typography */
  --wppb-font-size-lg: 1.25rem;

  /* Card responsive scaling (base; per-breakpoint overrides live in pb-sections) */
  --wppb-card-scale: 1;
  --wppb-card-min-width: 290px;
  --wppb-card-max-width: 360px;
  --wppb-card-min-height: 290px;
  --wppb-card-max-height: 360px;
  --wppb-card-image-height: 200px;
  --wppb-card-padding: 1.5rem;
  --wppb-card-title-size: 1.25rem;
  --wppb-card-text-size: 0.875rem;

  /* WordPress integration */
  --wp-admin-bar-height: 32px;
  --wp-admin-bar-mobile-height: 46px;
  --wp-theme-header-height: 0px;
  --wp-total-header-height: calc(var(--wp-admin-bar-height) + var(--wp-theme-header-height));

  /* Bootstrap override — !important so the plugin's blue beats Bootstrap's
     default --bs-primary regardless of load order. This is the single canonical
     definition; the former per-file :root copies (scrollspy ×2, estimate) were
     removed in favor of this one. */
  --bs-primary: var(--wppb-primary) !important;
  --bs-primary-rgb: var(--wppb-primary-rgb) !important;
}