/* ==========================================================================
   Resounding Hope — Design Tokens
   Brand colors extracted from the 4VEH wordmark and the Resounding Hope
   sub-mark (see raw_data/). Overrides Bootstrap 5.3 theme variables so the
   palette applies with zero Sass recompilation.
   ========================================================================== */

:root{
  /* ---- Brand: 4VEH ---- */
  --rh-crimson:       #9A1F3B;
  --rh-crimson-dark:  #7A1830;
  --rh-crimson-rgb:   154, 31, 59;
  --rh-blue:          #1B5E92;
  --rh-blue-dark:     #124A75;
  --rh-blue-rgb:      27, 94, 146;

  /* ---- Brand: Resounding Hope sub-mark ---- */
  /* --rh-orange is a background / large-display-text color only.
     It fails WCAG AA (4.5:1) as small text on light backgrounds. */
  --rh-orange:        #F0902E;
  --rh-orange-dark:   #C97418; /* use for orange-family body/UI text */
  --rh-orange-rgb:    240, 144, 46;

  /* ---- Neutrals (warm, not clinical) ---- */
  --rh-ink:           #2A2420;
  --rh-white:         #FFFFFF;
  --rh-cream:         #FAF6EF;
  --rh-cream-deep:    #F3ECDF;
  --rh-gray-100:      #F1ECE3;
  --rh-gray-300:      #D9D0C3;
  --rh-gray-600:      #7A7168;
  --rh-gray-900:      #34302B;

  /* ---- Typography ---- */
  --rh-font-display: 'Fraunces', 'Georgia', serif;
  --rh-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --rh-fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --rh-fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  --rh-fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --rh-fs-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem);
  --rh-fs-stat: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);

  /* ---- Spacing scale ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 3px rgba(42,36,32,0.08), 0 1px 2px rgba(42,36,32,0.06);
  --shadow-md: 0 8px 24px rgba(42,36,32,0.10);
  --shadow-lg: 0 20px 48px rgba(42,36,32,0.16);

  /* ---- Bootstrap 5.3 variable overrides ---- */
  --bs-primary:        var(--rh-blue);
  --bs-primary-rgb:    var(--rh-blue-rgb);
  --bs-secondary:      var(--rh-crimson);
  --bs-secondary-rgb:  var(--rh-crimson-rgb);
  --bs-body-color:     var(--rh-ink);
  --bs-body-bg:        var(--rh-cream);
  --bs-body-font-family: var(--rh-font-body);
  --bs-link-color:     var(--rh-blue-dark);
  --bs-link-hover-color: var(--rh-crimson-dark);
  --bs-border-color:   var(--rh-gray-300);
  --bs-border-radius:  var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
}