/* =========================================================
   VIRENDER HEALTH CARE — GLOBAL DESIGN TOKENS
   Source: Elementor → Site Settings → Global Colors / Global Fonts
   Use these variables in ANY custom template/page so everything
   stays consistent with the Elementor global styles.
   ========================================================= */

:root {

  /* ---------- COLORS (from Elementor Global Colors) ---------- */
  --vhc-primary:      #233829;   /* Dark olive green — headings, buttons, footer */
  --vhc-secondary:    #233829;
  --vhc-text:         #333333;   /* Body text color */
  --vhc-accent:       #233829;

  --vhc-gold:         #B19459;   /* "Yellow" custom color — icons, borders, highlights */
  --vhc-white:        #FFFFFF;
  --vhc-light-bg:     #FCFBF5;   /* Cream background */
  --vhc-pink:         #C56F6F;   /* Custom accent — used sparingly (badges, hearts) */

  /* ---------- FONTS (from Elementor Global Fonts) ---------- */
  --vhc-font-heading: 'Cormorant Garamond', serif;   /* Primary / Secondary system font */
  --vhc-font-body:    'Inter', sans-serif;            /* Text system font */
  --vhc-font-accent:  'DM Sans', sans-serif;          /* Accent system font */

  /* ---------- TYPE SCALE (from Elementor Typography settings) ---------- */
  --vhc-h1-size:   68px;
  --vhc-h1-weight: 700;
  --vhc-h1-lh:     1.1;
  --vhc-h1-ls:     -1.02px;

  --vhc-h2-size:   64px;
  --vhc-h2-weight: 700;
  --vhc-h2-lh:     1.1;

  --vhc-h3-size:   24px;
  --vhc-h3-weight: 700;
  --vhc-h3-lh:     1.2;

  --vhc-body-size:   18px;
  --vhc-body-weight: 400;
  --vhc-body-lh:     1.5;
  --vhc-paragraph-spacing: 15px;

  /* ---------- LAYOUT (from Elementor Layout Settings) ---------- */
  --vhc-container-width: 100vh;
  --vhc-radius-btn: 8px;
  --vhc-btn-padding-y: 16px;
  --vhc-btn-padding-x: 28px;

  
}

/* Quick usage reference:
   color: var(--vhc-primary);
   font-family: var(--vhc-font-heading);
   font-size: var(--vhc-h1-size);
*/