:root {
  --clr-primary:     #4a1d8f;
  --clr-primary-dk:  #2d0e66;
  --clr-primary-lt:  #7c3aed;
  --clr-gold:        #f0c84a;
  --clr-gold-lt:     #fde68a;
  --clr-surface:     #fafafa;
  --clr-surface-2:   #f3f0ff;
  --clr-border:      #d4b8ff;
  --clr-text:        #1e0a3c;
  --clr-text-2:      #5b4d8a;
  --clr-text-inv:    #ffffff;
  --clr-dark:        #12052e;
  --clr-dark-2:      #1a0a42;
  --clr-dark-3:      #21262d;
  --clr-danger:      #dc2626;
  --clr-danger-lt:   #dc26261a;
  --clr-success:     #16a34a;
  --clr-success-lt:  #16a34a18;
  --clr-warning:     #d97706;
  --clr-warning-lt:  #d9770618;
  --clr-info:        #2563eb;
  --clr-info-lt:     #2563eb18;

  /* RGB values for alpha blending */
  --clr-primary-rgb:    74, 29, 143;
  --clr-primary-dk-rgb: 45, 14, 102;
  --clr-primary-lt-rgb: 124, 58, 237;
  --clr-gold-rgb:       240, 200, 74;
  --clr-gold-lt-rgb:    253, 230, 138;
  --clr-dark-rgb:       18, 5, 46;
  --clr-dark-2-rgb:     26, 10, 66;

  /* Dynamic mappings for mobile visitor page (join.php & join.css) */
  --sa-bg:           #12052e;
  --sa-emerald-950:  #1a0a42;
  --sa-emerald-900:  #12052e;
  --sa-emerald-800:  #2d0e66;
  --sa-emerald-700:  #4a1d8f;
  --sa-emerald-500:  #7c3aed;
  --sa-gold-300:     #fde68a;
  --sa-gold-400:     #fde68a;
  --sa-gold-500:     #f0c84a;
  --sa-gold-600:     #f0c84a;
  --sa-gold-gradient: linear-gradient(135deg, #fde68a 0%, #f0c84a 60%, #fde68a 100%);
  --sa-glass-bg:     rgba(26, 10, 66, 0.78);
  --sa-glass-border: #f0c84a45;
}