/* ═══════════════════════════════════════════════════════════
   AfriMarket — CSS Variables & Design Tokens
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colors */
  --green:        #1B6B3A;
  --green-light:  #27A857;
  --green-pale:   #E8F5EE;
  --green-dark:   #0F4C1A;
  --gold:         #D4A017;
  --gold-light:   #F4C430;
  --gold-pale:    #FDF5DC;
  --red:          #C0392B;
  --red-pale:     #FDECEA;

  /* ── Neutrals */
  --dark:         #0F1E14;
  --dark2:        #1A2E20;
  --mid:          #3D5A44;
  --muted:        #6B8571;
  --border:       #D0DDD3;
  --light:        #F2F7F3;
  --white:        #FFFFFF;

  /* ── Shadows */
  --shadow:       0 2px 12px rgba(15,30,20,0.08);
  --shadow-lg:    0 8px 32px rgba(15,30,20,0.14);
  --shadow-xl:    0 16px 48px rgba(15,30,20,0.18);

  /* ── Radius */
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-full:  9999px;

  /* ── Typography */
  --font-head:    'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Transitions */
  --transition:   all 0.18s ease;
  --transition-slow: all 0.3s ease;

  /* ── Z-index scale */
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    500;
  --z-modal:      1000;
  --z-toast:      9999;
}