/*
 * Heart of Hope — Design Tokens (Sanctuary‑Soft Edition)
 */

:root {

  /* --------------------------------------------------
     Colors — Primary Palette
  -------------------------------------------------- */
  --hoh-purple: #5A3EA6;
  --hoh-purple-dark: #472f85;
  --hoh-purple-soft: #f3eaff;

  /* Lavender Atmosphere */
  --hoh-lavender-bg: #D8CFFF;
  --hoh-lavender-bg-light: #E4DDFF;
  --hoh-lavender-bg-halo: #F6F2FF;

  /* Accents */
  --hoh-heart-red: #E63946;
  --hoh-heart-red-accent: #F0492A;

  /* Neutrals */
  --hoh-white-bg: #ffffff;
  --hoh-text-main: #333333;
  --hoh-text-muted: #666666;

  /* Borders & Shadows */
  --hoh-border-soft: rgba(0,0,0,0.05);
  --hoh-shadow-soft: 0 4px 14px rgba(0,0,0,0.06);
  --hoh-shadow-deep: 0 8px 24px rgba(0,0,0,0.08);
  
  /* Tints */
  --hoh-glass-tint: rgba(75, 0, 130, 0.12); /*Sanctuary puprle whisper*/
  --hoh-purple-whisper: rgba(75, 0, 130, 0.12); /* Sanctuary purple whisper */
  --hoh-lavender-hover: rgba(216, 207, 255, 0.18); /* Gentle lavender hover */


  /* --------------------------------------------------
     Typography
  -------------------------------------------------- */
  --hoh-font-serif: 'Playfair Display', serif;
  --hoh-font-sans: 'Inter', 'Segoe UI', sans-serif;

  /* --------------------------------------------------
     Radius
  -------------------------------------------------- */
  --hoh-radius-sm: 8px;
  --hoh-radius-md: 12px;
  --hoh-radius-lg: 16px;
  --hoh-radius-xl: 18px;
  --hoh-radius-hero: 22px;
  --hoh-radius-halo: 24px;

  /* --------------------------------------------------
     Spacing
  -------------------------------------------------- */
  --hoh-space-xs: 0.5rem;
  --hoh-space-sm: 1rem;
  --hoh-space-md: 1.5rem;
  --hoh-space-lg: 2rem;
  --hoh-space-xl: 4rem;

  /* --------------------------------------------------
     Layout
  -------------------------------------------------- */
  --hoh-max-width-main: 1100px;
  --hoh-max-width-card: 1000px;
  --hoh-max-width-single: 760px;
}
