:root {
  /* Brand Colors (from logo) */
  --color-primary:       #37A1D9;  /* logo blue */
  --color-primary-dark:  #2786B8;  /* hover/active blue */
  --color-secondary:     #68AC2A;  /* logo green */
  --color-secondary-dark:#56901F;  /* hover/active green */
  --color-navy:          #0B2D5B;  /* dark navy — headings, footer, call CTA */
  --color-navy-light:    #133B73;
  --color-accent:        #25D366;  /* WhatsApp brand green */
  --color-accent-dark:   #1EBE5A;

  /* Text & surfaces */
  --color-dark:          #0B2D5B;
  --color-text:          #344256;
  --color-text-light:    #5C6B7D;
  --color-bg:            #FFFFFF;
  --color-bg-alt:        #F8FBFD;
  --color-bg-blue:       #EAF7FD;
  --color-bg-green:      #F0FAEA;
  --color-border:        #E1ECF5;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #37A1D9 0%, #2786B8 100%);
  --gradient-brand:   linear-gradient(135deg, #37A1D9 0%, #68AC2A 100%);
  --gradient-hero:    linear-gradient(135deg, #EAF7FD 0%, #F0FAEA 100%);

  /* Typography */
  --font-heading: 'Poppins', system-ui, sans-serif;
  --font-main:    'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;       /* 16px */
  --line-height: 1.65;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;

  /* Layout */
  --max-width: 1140px;
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   24px;
  --radius-full: 999px;
  --shadow:      0 4px 20px rgba(11, 45, 91, 0.07);
  --shadow-lg:   0 12px 40px rgba(11, 45, 91, 0.12);
  --shadow-hover:0 16px 48px rgba(55, 161, 217, 0.22);

  /* Transitions */
  --transition:      0.25s ease;
  --transition-slow: 0.4s ease;
}