/* --------------------------------------------------------------
00 — DESIGN SYSTEM (GLOBAL TOKENS)
Heart of Hope — Sanctuary‑Soft Edition
This file defines the entire visual language of the theme.
-------------------------------------------------------------- */

:root {

  /* --------------------------------------------------------------
     BRAND COLORS — Primary Palette
  -------------------------------------------------------------- */
  --hoh-purple-900: #2f1d57;
  --hoh-purple-800: #3d2970;
  --hoh-purple-700: #472f85;   /* Signature deep purple */
  --hoh-purple-600: #5A3EA6;   /* Primary brand purple */
  --hoh-purple-500: #6d4cc0;
  --hoh-purple-400: #8a6fe2;
  --hoh-purple-300: #b8a2ff;
  --hoh-purple-200: #d8cfff;
  --hoh-purple-100: #e9e2ff;
  --hoh-purple-50:  #f6f2ff;   /* Lavender halo */

  /* --------------------------------------------------------------
     ATMOSPHERE — Sanctuary Soft Backgrounds
  -------------------------------------------------------------- */
  --hoh-bg-white: #ffffff;
  --hoh-bg-soft: #faf8ff;
  --hoh-bg-lavender: #E4DDFF;
  --hoh-bg-halo: #F6F2FF;
  --hoh-bg-lavender-deeper: #c8b6ff;
  --hoh-bg-lavender-night:  #b8a2ff;


  /* --------------------------------------------------------------
     ACCENTS — Heart Red, Gold, Sky
  -------------------------------------------------------------- */
  --hoh-heart-red: #E63946;
  --hoh-heart-red-accent: #F0492A;

  --hoh-gold-500: #d4a937;
  --hoh-gold-300: #f2d98c;

  --hoh-sky-500: #4da3ff;
  --hoh-sky-300: #a8d4ff;

  /* --------------------------------------------------------------
     NEUTRALS — Text & Surfaces
  -------------------------------------------------------------- */
  --hoh-text-main: #333333;
  --hoh-text-muted: #666666;
  --hoh-text-soft: #888888;

  --hoh-border: rgba(0,0,0,0.08);
  --hoh-border-soft: rgba(0,0,0,0.05);

  /* --------------------------------------------------------------
     SHADOWS — Soft Sanctuary Depth
  -------------------------------------------------------------- */
  --hoh-shadow-soft: 0 4px 14px rgba(0,0,0,0.06);
  --hoh-shadow-deep: 0 8px 24px rgba(0,0,0,0.08);
  --hoh-shadow-halo: 0 0 40px rgba(90, 62, 166, 0.15);

  /* --------------------------------------------------------------
     TYPOGRAPHY — Global Font Tokens
  -------------------------------------------------------------- */
  --hoh-font-serif: 'Playfair Display', serif;
  --hoh-font-sans: 'Inter', 'Segoe UI', sans-serif;

  --hoh-font-size-xs: 0.75rem;
  --hoh-font-size-sm: 0.875rem;
  --hoh-font-size-md: 1rem;
  --hoh-font-size-lg: 1.25rem;
  --hoh-font-size-xl: 1.5rem;
  --hoh-font-size-hero: clamp(2rem, 5vw, 3.2rem);

  /* --------------------------------------------------------------
     RADIUS — Sanctuary Curves
  -------------------------------------------------------------- */
  --hoh-radius-sm: 6px;
  --hoh-radius-md: 10px;
  --hoh-radius-lg: 14px;
  --hoh-radius-xl: 18px;
  --hoh-radius-halo: 24px;

  /* --------------------------------------------------------------
     SPACING — Vertical Rhythm
  -------------------------------------------------------------- */
  --hoh-space-2xs: 0.25rem;
  --hoh-space-xs: 0.5rem;
  --hoh-space-sm: 1rem;
  --hoh-space-md: 1.5rem;
  --hoh-space-lg: 2rem;
  --hoh-space-xl: 4rem;

  /* --------------------------------------------------------------
     LAYOUT — Max Widths
  -------------------------------------------------------------- */
  --hoh-max-width-main: 1100px;
  --hoh-max-width-card: 1000px;
  --hoh-max-width-single: 760px;

  /* --------------------------------------------------------------
     EFFECTS — Glass, Hover, Transitions
  -------------------------------------------------------------- */
  --hoh-glass-tint: rgba(75, 0, 130, 0.12);
  --hoh-purple-whisper: rgba(75, 0, 130, 0.12);
  --hoh-lavender-hover: rgba(216, 207, 255, 0.18);

  --hoh-transition-fast: 0.15s ease;
  --hoh-transition: 0.25s ease;
  --hoh-transition-slow: 0.4s ease;
}