/* ============================================
   AfriPure Essentials — Design Tokens
   ============================================ */

:root {
  /* ---- Brand Colors ---- */
  --color-primary:        #2E8B57;   /* AfriPure Green */
  --color-primary-dark:   #236B43;
  --color-primary-light:  #3AAE6D;
  --color-secondary:      #5A4633;   /* Deep Earth Brown */
  --color-secondary-dark: #3E2F22;
  --color-secondary-light:#7A6453;
  --color-accent:         #D8A23F;   /* Warm Gold */
  --color-accent-dark:    #B8872F;
  --color-accent-light:   #E8BC6A;
  --color-ivory:          #FAF7F2;   /* Clean Ivory */
  --color-ivory-warm:     #F5F0E8;
  --color-soft-green:     #A7D3A9;   /* Herbal Soft Green */
  --color-soft-green-light:#C8E6C9;
  
  /* ---- Neutral Colors ---- */
  --color-white:          #FFFFFF;
  --color-gray-50:        #FAFAF9;
  --color-gray-100:       #F5F5F4;
  --color-gray-200:       #E7E5E4;
  --color-gray-300:       #D6D3D1;
  --color-gray-400:       #A8A29E;
  --color-gray-500:       #78716C;
  --color-gray-600:       #57534E;
  --color-gray-700:       #44403C;
  --color-gray-800:       #292524;
  --color-gray-900:       #1C1917;
  --color-black:          #0A0A0A;

  /* ---- Typography ---- */
  --font-primary:    'Montserrat', sans-serif;
  --font-secondary:  'Lora', serif;
  --font-accent:     'Playfair Display', serif;

  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;

  --fs-xs:           0.75rem;    /* 12px */
  --fs-sm:           0.875rem;   /* 14px */
  --fs-base:         1rem;       /* 16px */
  --fs-md:           1.125rem;   /* 18px */
  --fs-lg:           1.25rem;    /* 20px */
  --fs-xl:           1.5rem;     /* 24px */
  --fs-2xl:          1.875rem;   /* 30px */
  --fs-3xl:          2.25rem;    /* 36px */
  --fs-4xl:          3rem;       /* 48px */
  --fs-5xl:          3.75rem;    /* 60px */
  --fs-6xl:          4.5rem;     /* 72px */

  --lh-tight:        1.2;
  --lh-snug:         1.35;
  --lh-normal:       1.6;
  --lh-relaxed:      1.75;

  --ls-tight:        -0.02em;
  --ls-normal:       0;
  --ls-wide:         0.05em;
  --ls-wider:        0.1em;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* ---- Layout ---- */
  --max-width:       1200px;
  --max-width-narrow: 960px;
  --max-width-text:  720px;
  --nav-height:      80px;
  --gutter:          25px;
  --section-padding:  var(--space-24) var(--gutter);

  /* ---- Border Radius ---- */
  --radius-sm:  0.375rem;
  --radius-md:  0.75rem;
  --radius-lg:  1rem;
  --radius-xl:  1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:    0 1px 2px rgba(90, 70, 51, 0.06);
  --shadow-md:    0 4px 12px rgba(90, 70, 51, 0.08);
  --shadow-lg:    0 8px 24px rgba(90, 70, 51, 0.1);
  --shadow-xl:    0 16px 48px rgba(90, 70, 51, 0.12);
  --shadow-glow:  0 0 30px rgba(46, 139, 87, 0.2);
  --shadow-gold:  0 0 20px rgba(216, 162, 63, 0.25);

  /* ---- Glass ---- */
  --glass-bg:     rgba(250, 247, 242, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --glass-blur:   20px;

  /* ---- Transitions ---- */
  --transition-fast:   0.15s ease;
  --transition-base:   0.3s ease;
  --transition-slow:   0.5s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Page Colors ---- */
  --color-bg:      var(--color-ivory);
  --color-bg-alt:  var(--color-ivory-warm);
  --color-error:   #dc3545;
  --color-success: #2E8B57;

  /* ---- Z-Index ---- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
}