/* ============================================================
   HBCL Brand Tokens — aligned to WordPress Elementor kit
   Source: post-1899.css extracted 2026-04-24
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Roboto:wght@300;400;500;600&family=Roboto+Slab:wght@400;600&display=swap');

:root {
  /* Lock the rendering color-scheme to light. E16 dark-mode rollout is
     incomplete — the override below at line ~126 swaps --site-* tokens
     but not the --hbcl-* tokens that page CSS actually consumes. Without
     this declaration, browsers in OS dark mode auto-darken <select>
     dropdowns + form widgets, producing dark text on dark bg on pages
     like /members/provider/profile. Drop this once dark mode is fully
     wired across --hbcl-* tokens. */
  color-scheme: light;

  /* Core palette */
  --hbcl-purple:        #543D93;
  --hbcl-purple-dark:   #3d2b73;
  --hbcl-purple-mid:    #6952BA;
  --hbcl-purple-soft:   #9C5BBA;
  --hbcl-rose:          #ED70A3;
  --hbcl-rose-dark:     #d85a8f;
  --hbcl-lavender:      #FAF7FF;
  --hbcl-surface-alt:   #f3f0fb;
  --hbcl-dark:          #220A17;
  --hbcl-peach:         #FFBC7D;

  /* Semantic */
  --hbcl-primary:       var(--hbcl-purple);
  --hbcl-accent:        var(--hbcl-rose);
  --hbcl-surface:       var(--hbcl-lavender);
  --hbcl-card:          #FFFFFF;
  --hbcl-text:          #1a0f2e;
  --hbcl-text-muted:    #6952BA;
  --hbcl-meta:          #6952BA;
  --hbcl-border:        rgba(84, 61, 147, 0.15);
  --hbcl-ok:            #1b6b3a;
  --hbcl-ok-bg:         #d2efd8;
  --hbcl-danger:        #a4262c;
  --hbcl-danger-bg:     #f5d9da;
  --hbcl-info:          #0a3a6b;
  --hbcl-info-bg:       #c2e0fc;
  --hbcl-star:          #f5a623;

  /* Gradients */
  --hbcl-grad-primary:       linear-gradient(232deg, #543D93 0%, #ED70A3 100%);
  --hbcl-grad-primary-soft:  linear-gradient(120deg, #543D93 0%, #ED70A3 100%);
  --hbcl-grad-soft:          linear-gradient(120deg, #9C5BBA 0%, #ED70A3 100%);
  --hbcl-grad-dark:          linear-gradient(135deg, #220A17 0%, #543D93 100%);
  --hbcl-grad-mid:           linear-gradient(135deg, #543D93 0%, #9C5BBA 100%);
  /* 3-stop hero gradient — shared by index.php hero and .mk-auth full-bleed sections */
  --hbcl-grad-hero:          linear-gradient(135deg, #220A17 0%, #543D93 60%, #9C5BBA 100%);

  /* Typography */
  --hbcl-font-display:  "Marcellus", serif;
  --hbcl-font-body:     "Roboto", sans-serif;
  --hbcl-font-slab:     "Roboto Slab", serif;

  /* Radius */
  --hbcl-radius-btn:    40px;
  --hbcl-radius-card:   16px;
  --hbcl-radius-sm:     8px;
  --hbcl-radius-badge:  999px;

  /* Shadows */
  --hbcl-shadow-card:   0 2px 12px rgba(84, 61, 147, 0.10);
  --hbcl-shadow-btn:    0 4px 16px rgba(84, 61, 147, 0.25);

  /* Legacy teal aliases — remove gradually */
  --hbcl-teal:          var(--hbcl-purple);
  --hbcl-teal-600:      var(--hbcl-purple-dark);
  --hbcl-teal-700:      var(--hbcl-purple-dark);

  /* --site-* contract aliases (A1-L6 compliance) */
  --site-primary:       var(--hbcl-primary, #543D93);
  --site-on-primary:    #ffffff;
  --site-accent:        var(--hbcl-accent, #ED70A3);
  --site-bg:            #ffffff;
  --site-surface:       var(--hbcl-surface, #FAF7FF);
  --site-text:          var(--hbcl-text, #1a0f2e);
  --site-muted:         var(--hbcl-text-muted, #6952BA);
  --site-radius:        var(--hbcl-radius-card, 16px);
  --site-font-body:     var(--hbcl-font-body, 'Roboto', sans-serif);
  --site-font-heading:  var(--hbcl-font-display, 'Marcellus', serif);
  --site-transition:    0.2s ease;
  --site-border:        var(--hbcl-border, rgba(84, 61, 147, 0.15));
  --site-text-muted:    var(--site-muted);

  /* Utility */
  --hbcl-white:          #ffffff;

  /* Status badge palette */
  --hbcl-inquiry-bg:     #fce9c2;
  --hbcl-inquiry-text:   #6b4a00;
  --hbcl-scheduled-bg:   #c2e0fc;
  --hbcl-scheduled-text: #0a3a6b;

  /* Admin message bubble */
  --hbcl-admin-accent:   #8a5cff;
  --hbcl-admin-bg:       #f4efff;

  /* --hhw-* semantic state tokens (E2/E3) */
  --hhw-success-bg:     #d1fae5;
  --hhw-success-text:   #065f46;
  --hhw-error-bg:       #fee2e2;
  --hhw-error-text:     #991b1b;
}

/* ============================================================
   Badge utility classes (E7/E8)
   ============================================================ */
.hhw-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.hhw-badge--ok {
  background: var(--hhw-success-bg, #d1fae5);
  color: var(--hhw-success-text, #065f46);
}
.hhw-badge--error {
  background: var(--hhw-error-bg, #fee2e2);
  color: var(--hhw-error-text, #991b1b);
}

/* ============================================================
   Dark mode (E16) — prefers-color-scheme override
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --site-bg:      #1a0f2e;
    --site-surface: #220a35;
    --site-text:    #f0ecff;
    --site-muted:   #9d9bb5;
    --site-border:  rgba(84, 61, 147, 0.35);
    /* Hue-relevant overrides: brand purple #543D93 has only 2.14:1 vs #1a0f2e (fails AA).
       Lift to #9F87E5 → 6.14:1 (AA normal text, AAA large/UI). Accent rose stays bright. */
    --site-primary: #9F87E5;
    --site-accent:  #ED70A3;
    /* On the lifted lavender, white text drops to ~2.5:1 (FAIL AA). Use deep ink
       for on-primary in dark mode so .mk-btn--primary stays high-contrast. */
    --site-on-primary: #1a0f2e;
  }
}