/* ==========================================================================
   WantMattress Sleep Tools — Design Tokens
   Shared across all tools in the sleep tools vertical.
   Uses px units because the host site sets html { font-size: 10px }.
   Font families set to Montserrat to match the host site.
   ========================================================================== */

:root {
  /* ---- Brand ---- */
  --wm-brand-primary:        #041e43;
  --wm-brand-primary-dark:   #031733;
  --wm-brand-primary-light:  #e8edf3;
  --wm-brand-secondary:      #0cc5de;
  --wm-brand-secondary-dark: #05c3dd;

  /* ---- Neutrals ---- */
  --wm-grey-900:  #1a1a1a;
  --wm-grey-700:  #4a4a4a;
  --wm-grey-500:  #767676;
  --wm-grey-200:  #e8e8e8;
  --wm-grey-100:  #f5f5f5;
  --wm-white:     #ffffff;

  /* ---- Semantic — tool result states ---- */
  --wm-status-recommended:      #1a7a4a;
  --wm-status-recommended-bg:   #e6f7ee;
  --wm-status-minimum:          #b45309;
  --wm-status-minimum-bg:       #fef3cd;
  --wm-status-extended:         #1d4ed8;
  --wm-status-extended-bg:      #eff6ff;
  --wm-status-severe:           #dc2626;
  --wm-status-severe-bg:        #fef2f2;

  /* ---- Semantic — page-level callouts ---- */
  --wm-callout-info-bg:      #eff6ff;
  --wm-callout-info-border:  #bfdbfe;
  --wm-callout-warn-bg:      #fffbeb;
  --wm-callout-warn-border:  #fde68a;

  /* ---- Conversion module ---- */
  --wm-conversion-bg:        #f0f9f4;
  --wm-conversion-border:    #bbf7d0;

  /* ---- Typography (matches host site) ---- */
  --wm-font-body:    'Montserrat', sans-serif;
  --wm-font-heading: 'Montserrat', sans-serif;

  --wm-text-base:   16px;
  --wm-text-result: 40px;

  --wm-leading-tight: 1.25;
  --wm-leading-body:  1.6;
  --wm-leading-loose: 1.8;

  --wm-font-weight-normal: 400;
  --wm-font-weight-medium: 500;
  --wm-font-weight-semi:   600;
  --wm-font-weight-bold:   700;

  /* ---- Spacing (4px base grid) ---- */
  --wm-space-1:    4px;
  --wm-space-2:    8px;
  --wm-space-3:   12px;
  --wm-space-4:   16px;
  --wm-space-5:   20px;
  --wm-space-6:   24px;
  --wm-space-8:   32px;
  --wm-space-10:  40px;
  --wm-space-12:  48px;
  --wm-space-16:  64px;
  --wm-space-20:  80px;

  /* ---- Component-specific ---- */
  --wm-section-gap:          var(--wm-space-16);
  --wm-faq-item-padding:     var(--wm-space-5) 0;

  /* ---- Shape & effects ---- */
  --wm-radius-sm:   4px;
  --wm-radius-md:   8px;
  --wm-radius-lg:   12px;
  --wm-radius-xl:   16px;
  --wm-radius-pill:  9999px;

  --wm-shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --wm-shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --wm-shadow-lg:  0 10px 25px rgba(0,0,0,0.1), 0 4px 10px rgba(0,0,0,0.05);

  --wm-transition-fast: 150ms ease;
  --wm-transition-base: 250ms ease;

  --wm-border-base: 1px solid var(--wm-grey-200);
}