/* HerHost Theme — palette + tokens only */
:root{
  /* ===== Brand palette (your 4 colors) ===== */
  --hh-white: #ffffff;         /* white */
  --hh-tan:   #f6efe6;         /* light tan */
  --hh-pink:  #f9c5d5;         /* pink */
  --hh-red:   #e11d48;         /* red */

  /* ===== Helpful supporting tokens (derived) ===== */
  --hh-deep:  #9f1239;         /* deep red for hover/contrast */
  --hh-ink:   #1f2937;         /* dark text */
  --hh-muted: #6b7280;         /* muted text */
  --hh-card:  #ffffff;         /* card bg */
  --hh-ring:  rgba(225, 17, 72, .25); /* focus ring based on red */
  --hh-shadow: 0 10px 30px rgba(225,17,72,.08), 0 2px 8px rgba(31,41,55,.06);

  /* Spacing / radii */
  --radius-xl: 18px;
  --radius-lg: 14px;
  --radius-md: 10px;

  /* Layout helpers */
  --pad: clamp(18px, 2vw, 28px);
  --max: 1100px;

  /* Gradients that use your brand colors */
  --grad: linear-gradient(135deg, var(--hh-pink) 0%, #fbe2e8 35%, #ffdede 60%, #ffecec 100%);
  --grad-cta: linear-gradient(135deg, var(--hh-red), #ff4d6d);
}

/* Optional: quick utility classes if you want them */
.bg-tan  { background: var(--hh-tan) !important; }
.bg-pink { background: var(--hh-pink) !important; }
.text-red{ color: var(--hh-red) !important; }
.btn-red { background: var(--hh-red) !important; color:#fff !important; }