/* ═══════════════════════════════════════════════════════════
   variables.css — Design tokens
   1:1 look of the reference site: Open Sans, orange accent,
   light-gray alternating sections, near-black footer.
═══════════════════════════════════════════════════════════ */
:root {
  /* Brand accent (reference orange) */
  --orange:       #f5a623;
  --orange-dark:  #e0930d;
  --orange-soft:  #fdf3e0;
  --green-wa:     #25d366;

  /* Aliases kept so older class styling keeps working */
  --blue-base:    var(--orange);
  --blue-dark:    var(--orange-dark);
  --blue-darker:  #111111;
  --blue-light:   var(--orange-soft);
  --gold-base:    var(--orange);
  --gold-dark:    var(--orange-dark);
  --gold-light:   #ffc95e;
  --teal-base:    var(--orange);
  --teal-dark:    var(--orange-dark);

  /* Surfaces & text (pistachio green theme) */
  --pistachio:      #7fb85a;        /* pistachio accent            */
  --pistachio-soft: #d5e8bd;        /* light pistachio (body bg)   */
  --page-bg:      #c6dda2;          /* alternating pistachio sections */
  --card-bg:      #ffffff;
  --topbar-bg:    #3a3a3a;          /* thin dark strip             */
  --header-bg:    #e2efd0;          /* light pistachio header bar  */
  --footer-bg:    #111111;          /* near-black footer           */
  --heading:      #555555;          /* light-weight gray headings  */
  --heading-dark: #333333;
  --body:         #666666;
  --muted:        #888888;
  --border:       #e8e8e8;

  /* Gradients / overlays */
  --grad-orange:  linear-gradient(135deg, #f7b733 0%, #f5a623 100%);
  --hero-overlay: rgba(97, 109, 122, .55);
  --grad-blue:    var(--grad-orange);
  --grad-dark:    linear-gradient(135deg, #4a545e 0%, #39424b 100%);
  --grad-gold:    var(--grad-orange);
  --grad-teal:    var(--grad-orange);
  --grad-card:    linear-gradient(135deg, #e9f2dc 0%, #d9e8c3 100%);

  /* Type — Open Sans everywhere, like the reference */
  --font-head:   'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:   'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs:  0.75rem;
  --text-sm:  0.875rem;
  --text-base:0.9375rem;
  --text-md:  1.0625rem;
  --text-lg:  1.375rem;
  --text-xl:  1.75rem;
  --text-2xl: 2.125rem;
  --text-3xl: 2.625rem;
  --text-4xl: 3.75rem;

  /* Spacing */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px;  --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px;--sp-16: 64px; --sp-20: 80px;

  /* Radii & shadows (reference: pills + soft cards) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 100px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07);
  --shadow-md: 0 4px 14px rgba(0,0,0,.09);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
  --shadow-xl: 0 22px 55px rgba(0,0,0,.16);

  --container: 1180px;
  --nav-h: 78px;
}