:root {
  /* Maisha Bora Sacco Brand Colors */
  
  /* Primary Color - Green */
  --color-primary-50: #F2FBF7;
  --color-primary-100: #D9F4E7;
  --color-primary-200: #B3E9CF;
  --color-primary-300: #80D9B0;
  --color-primary-400: #4DC991;
  --color-primary-500: #1AB972;
  --color-primary-600: #016839;
  --color-primary-700: #015F33;
  --color-primary-800: #014F2B;
  --color-primary-900: #013F22;

  /* Secondary Color - Yellow Green */
--color-secondary-50: #FBFDEB;
--color-secondary-100: #F6FAD0;
--color-secondary-200: #EEF5A8;
--color-secondary-300: #E6EF80;
--color-secondary-400: #E1EA8A;
--color-secondary-500: #DEE67E;
--color-secondary-600: #C9D468;
--color-secondary-700: #AAB450;
--color-secondary-800: #8C943A;
--color-secondary-900: #6F7528;

  /* Accent Color - Fresh Lime Green */
--color-accent-100: #F7FBEA;
--color-accent-200: #EEF6C8;
--color-accent-300: #E3F19F;
--color-accent-400: #D7EB76;
--color-accent-500: #CBE54D;
--color-accent-600: #B8D13A;
--color-accent-700: #9FB62F;
--color-accent-800: #7F9124;
--color-accent-900: #5F6C1A;

  /* Neutral colors */
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Status colors */
  --color-success-500: #22c55e;
  --color-error-500: #ef4444;
  --color-warning-500: #f59e0b;
  --color-info-500: #3b82f6;
}

/* Theme-specific for Maisha Bora Sacco */
[data-theme="Maisha Bora_sacco"] {
  /* Primary - Deep Green */
  --color-primary-50: #F2FBF7;
  --color-primary-100: #D9F4E7;
  --color-primary-200: #B3E9CF;
  --color-primary-300: #80D9B0;
  --color-primary-400: #4DC991;
  --color-primary-500: #1AB972;
  --color-primary-600: #016839;
  --color-primary-700: #015F33;
  --color-primary-800: #014F2B;
  --color-primary-900: #013F22;

  /* Secondary - Yellow Green */
  --color-secondary-50: #FBFDEB;
  --color-secondary-100: #F6FAD0;
  --color-secondary-200: #EEF5A8;
  --color-secondary-300: #E6EF80;
  --color-secondary-400: #E1EA8A;
  --color-secondary-500: #DEE67E;
  --color-secondary-600: #C9D468;
  --color-secondary-700: #AAB450;
  --color-secondary-800: #8C943A;
  --color-secondary-900: #6F7528;

  /* Accent - Fresh Lime Green */
  --color-accent-100: #F7FBEA;
  --color-accent-200: #EEF6C8;
  --color-accent-300: #E3F19F;
  --color-accent-400: #D7EB76;
  --color-accent-500: #CBE54D;
  --color-accent-600: #B8D13A;
  --color-accent-700: #9FB62F;
  --color-accent-800: #7F9124;
  --color-accent-900: #5F6C1A;
}

/* Utility Classes */

/* Background Colors - Primary (Orange) */
.bg-theme-primary-50 { background-color: var(--color-primary-50); }
.bg-theme-primary-100 { background-color: var(--color-primary-100); }
.bg-theme-primary-200 { background-color: var(--color-primary-200); }
.bg-theme-primary-300 { background-color: var(--color-primary-300); }
.bg-theme-primary-400 { background-color: var(--color-primary-400); }
.bg-theme-primary-500 { background-color: var(--color-primary-500); }
.bg-theme-primary-600 { background-color: var(--color-primary-600); }
.bg-theme-primary-700 { background-color: var(--color-primary-700); }
.bg-theme-primary-800 { background-color: var(--color-primary-800); }
.bg-theme-primary-900 { background-color: var(--color-primary-900); }

/* Background Colors - Secondary (Teal) */
.bg-theme-secondary-50 { background-color: var(--color-secondary-50); }
.bg-theme-secondary-100 { background-color: var(--color-secondary-100); }
.bg-theme-secondary-200 { background-color: var(--color-secondary-200); }
.bg-theme-secondary-300 { background-color: var(--color-secondary-300); }
.bg-theme-secondary-400 { background-color: var(--color-secondary-400); }
.bg-theme-secondary-500 { background-color: var(--color-secondary-500); }
.bg-theme-secondary-600 { background-color: var(--color-secondary-600); }
.bg-theme-secondary-700 { background-color: var(--color-secondary-700); }
.bg-theme-secondary-800 { background-color: var(--color-secondary-800); }
.bg-theme-secondary-900 { background-color: var(--color-secondary-900); }

/* Background Colors - Accent (Light Teal) */
.bg-theme-accent-100 { background-color: var(--color-accent-100); }
.bg-theme-accent-200 { background-color: var(--color-accent-200); }
.bg-theme-accent-300 { background-color: var(--color-accent-300); }
.bg-theme-accent-400 { background-color: var(--color-accent-400); }
.bg-theme-accent-500 { background-color: var(--color-accent-500); }
.bg-theme-accent-600 { background-color: var(--color-accent-600); }
.bg-theme-accent-700 { background-color: var(--color-accent-700); }
.bg-theme-accent-800 { background-color: var(--color-accent-800); }
.bg-theme-accent-900 { background-color: var(--color-accent-900); }

/* Text Colors - Primary (Orange) */
.text-theme-primary-100 { color: var(--color-primary-100); }
.text-theme-primary-200 { color: var(--color-primary-200); }
.text-theme-primary-300 { color: var(--color-primary-300); }
.text-theme-primary-400 { color: var(--color-primary-400); }
.text-theme-primary-500 { color: var(--color-primary-500); }
.text-theme-primary-600 { color: var(--color-primary-600); }
.text-theme-primary-700 { color: var(--color-primary-700); }
.text-theme-primary-800 { color: var(--color-primary-800); }
.text-theme-primary-900 { color: var(--color-primary-900); }

/* Text Colors - Secondary (Teal) */
.text-theme-secondary-100 { color: var(--color-secondary-100); }
.text-theme-secondary-200 { color: var(--color-secondary-200); }
.text-theme-secondary-300 { color: var(--color-secondary-300); }
.text-theme-secondary-400 { color: var(--color-secondary-400); }
.text-theme-secondary-500 { color: var(--color-secondary-500); }
.text-theme-secondary-600 { color: var(--color-secondary-600); }
.text-theme-secondary-700 { color: var(--color-secondary-700); }
.text-theme-secondary-800 { color: var(--color-secondary-800); }
.text-theme-secondary-900 { color: var(--color-secondary-900); }

/* Text Colors - Accent (Light Teal) */
.text-theme-accent-100 { color: var(--color-accent-100); }
.text-theme-accent-200 { color: var(--color-accent-200); }
.text-theme-accent-300 { color: var(--color-accent-300); }
.text-theme-accent-400 { color: var(--color-accent-400); }
.text-theme-accent-500 { color: var(--color-accent-500); }
.text-theme-accent-600 { color: var(--color-accent-600); }
.text-theme-accent-700 { color: var(--color-accent-700); }
.text-theme-accent-800 { color: var(--color-accent-800); }
.text-theme-accent-900 { color: var(--color-accent-900); }

/* Border Colors - Primary (Orange) */
.border-theme-primary-100 { border-color: var(--color-primary-100); }
.border-theme-primary-200 { border-color: var(--color-primary-200); }
.border-theme-primary-300 { border-color: var(--color-primary-300); }
.border-theme-primary-400 { border-color: var(--color-primary-400); }
.border-theme-primary-500 { border-color: var(--color-primary-500); }
.border-theme-primary-600 { border-color: var(--color-primary-600); }
.border-theme-primary-700 { border-color: var(--color-primary-700); }
.border-theme-primary-800 { border-color: var(--color-primary-800); }
.border-theme-primary-900 { border-color: var(--color-primary-900); }

/* Border Colors - Secondary (Teal) */
.border-theme-secondary-100 { border-color: var(--color-secondary-100); }
.border-theme-secondary-200 { border-color: var(--color-secondary-200); }
.border-theme-secondary-300 { border-color: var(--color-secondary-300); }
.border-theme-secondary-400 { border-color: var(--color-secondary-400); }
.border-theme-secondary-500 { border-color: var(--color-secondary-500); }
.border-theme-secondary-600 { border-color: var(--color-secondary-600); }
.border-theme-secondary-700 { border-color: var(--color-secondary-700); }
.border-theme-secondary-800 { border-color: var(--color-secondary-800); }
.border-theme-secondary-900 { border-color: var(--color-secondary-900); }

/* Border Colors - Accent (Light Teal) */
.border-theme-accent-100 { border-color: var(--color-accent-100); }
.border-theme-accent-200 { border-color: var(--color-accent-200); }
.border-theme-accent-300 { border-color: var(--color-accent-300); }
.border-theme-accent-400 { border-color: var(--color-accent-400); }
.border-theme-accent-500 { border-color: var(--color-accent-500); }
.border-theme-accent-600 { border-color: var(--color-accent-600); }
.border-theme-accent-700 { border-color: var(--color-accent-700); }
.border-theme-accent-800 { border-color: var(--color-accent-800); }
.border-theme-accent-900 { border-color: var(--color-accent-900); }

/* Hover States */
.hover\:bg-theme-primary-50:hover { background-color: var(--color-primary-100); }
.hover\:bg-theme-primary-100:hover { background-color: var(--color-primary-100); }
.hover\:bg-theme-primary-200:hover { background-color: var(--color-primary-200); }
.hover\:bg-theme-primary-300:hover { background-color: var(--color-primary-300); }
.hover\:bg-theme-primary-400:hover { background-color: var(--color-primary-400); }
.hover\:bg-theme-primary-500:hover { background-color: var(--color-primary-500); }
.hover\:bg-theme-primary-600:hover { background-color: var(--color-primary-600); }
.hover\:bg-theme-primary-700:hover { background-color: var(--color-primary-700); }
.hover\:bg-theme-primary-800:hover { background-color: var(--color-primary-800); }
.hover\:bg-theme-primary-900:hover { background-color: var(--color-primary-900); }

.hover\:bg-theme-secondary-50:hover { background-color: var(--color-secondary-100); }
.hover\:bg-theme-secondary-100:hover { background-color: var(--color-secondary-100); }
.hover\:bg-theme-secondary-200:hover { background-color: var(--color-secondary-200); }
.hover\:bg-theme-secondary-300:hover { background-color: var(--color-secondary-300); }
.hover\:bg-theme-secondary-400:hover { background-color: var(--color-secondary-400); }
.hover\:bg-theme-secondary-500:hover { background-color: var(--color-secondary-500); }
.hover\:bg-theme-secondary-600:hover { background-color: var(--color-secondary-600); }
.hover\:bg-theme-secondary-700:hover { background-color: var(--color-secondary-700); }
.hover\:bg-theme-secondary-800:hover { background-color: var(--color-secondary-800); }
.hover\:bg-theme-secondary-900:hover { background-color: var(--color-secondary-900); }

.hover\:text-theme-primary-100:hover { color: var(--color-primary-100); }
.hover\:text-theme-primary-200:hover { color: var(--color-primary-200); }
.hover\:text-theme-primary-300:hover { color: var(--color-primary-300); }
.hover\:text-theme-primary-400:hover { color: var(--color-primary-400); }
.hover\:text-theme-primary-500:hover { color: var(--color-primary-500); }
.hover\:text-theme-primary-600:hover { color: var(--color-primary-600); }
.hover\:text-theme-primary-700:hover { color: var(--color-primary-700); }
.hover\:text-theme-primary-800:hover { color: var(--color-primary-800); }
.hover\:text-theme-primary-900:hover { color: var(--color-primary-900); }

.hover\:text-theme-secondary-100:hover { color: var(--color-secondary-100); }
.hover\:text-theme-secondary-200:hover { color: var(--color-secondary-200); }
.hover\:text-theme-secondary-300:hover { color: var(--color-secondary-300); }
.hover\:text-theme-secondary-400:hover { color: var(--color-secondary-400); }
.hover\:text-theme-secondary-500:hover { color: var(--color-secondary-500); }
.hover\:text-theme-secondary-600:hover { color: var(--color-secondary-600); }
.hover\:text-theme-secondary-700:hover { color: var(--color-secondary-700); }
.hover\:text-theme-secondary-800:hover { color: var(--color-secondary-800); }
.hover\:text-theme-secondary-900:hover { color: var(--color-secondary-900); }

/* Legacy aliases for backward compatibility */
.bg-theme-primary { background-color: var(--color-primary-500); }
.bg-theme-primary-light { background-color: var(--color-primary-400); }
.bg-theme-primary-dark { background-color: var(--color-primary-600); }
.bg-theme-primary-lightest { background-color: var(--color-primary-100); }

.bg-theme-secondary { background-color: var(--color-secondary-500); }
.bg-theme-secondary-light { background-color: var(--color-secondary-400); }
.bg-theme-secondary-dark { background-color: var(--color-secondary-600); }
.bg-theme-secondary-lightest { background-color: var(--color-secondary-100); }

.bg-theme-accent { background-color: var(--color-accent-500); }
.bg-theme-accent-light { background-color: var(--color-accent-400); }
.bg-theme-accent-dark { background-color: var(--color-accent-600); }
.bg-theme-accent-lightest { background-color: var(--color-accent-100); }

.text-theme-primary { color: var(--color-primary-500); }
.text-theme-primary-light { color: var(--color-primary-400); }
.text-theme-primary-dark { color: var(--color-primary-600); }

.text-theme-secondary { color: var(--color-secondary-500); }
.text-theme-secondary-light { color: var(--color-secondary-400); }
.text-theme-secondary-dark { color: var(--color-secondary-600); }

.text-theme-accent { color: var(--color-accent-500); }
.text-theme-accent-light { color: var(--color-accent-400); }
.text-theme-accent-dark { color: var(--color-accent-600); }

.border-theme-primary { border-color: var(--color-primary-500); }
.border-theme-primary-light { border-color: var(--color-primary-400); }
.border-theme-primary-dark { border-color: var(--color-primary-600); }

.border-theme-secondary { border-color: var(--color-secondary-500); }
.border-theme-secondary-light { border-color: var(--color-secondary-400); }
.border-theme-secondary-dark { border-color: var(--color-secondary-600); }

.hover\:bg-theme-primary-hover:hover { background-color: var(--color-primary-600); }
.hover\:bg-theme-secondary-hover:hover { background-color: var(--color-secondary-600); }
.hover\:text-theme-primary:hover { color: var(--color-primary-500); }
.hover\:text-theme-secondary:hover { color: var(--color-secondary-500); }

/* Gradient utilities for the logo effect */
.bg-gradient-Maisha Bora { 
  background: linear-gradient(to bottom, #FFFFFF 0%, #38BDF8 50%, #3B82F6 100%); 
}

.bg-gradient-Maisha Bora-light { 
  background: linear-gradient(to bottom, #FFFFFF 0%, #7DD3FC 50%, #60A5FA 100%); 
}

/* Gradient utilities for theme colors */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }

/* ── Primary gradient helpers (green palette) ── */
.from-theme-primary-50  { --tw-gradient-from: var(--color-primary-50);  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(242,251,247,0)); }
.from-theme-primary-100 { --tw-gradient-from: var(--color-primary-100); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(217,244,231,0)); }
.from-theme-primary-500 { --tw-gradient-from: var(--color-primary-500); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(26,185,114,0)); }
.from-theme-primary-600 { --tw-gradient-from: var(--color-primary-600); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(1,104,57,0)); }
.from-theme-primary-700 { --tw-gradient-from: var(--color-primary-700); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(1,95,51,0)); }
.from-theme-primary-800 { --tw-gradient-from: var(--color-primary-800); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(1,79,43,0)); }
.from-theme-primary-900 { --tw-gradient-from: var(--color-primary-900); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(1,63,34,0)); }

.to-theme-primary-50  { --tw-gradient-to: var(--color-primary-50); }
.to-theme-primary-100 { --tw-gradient-to: var(--color-primary-100); }
.to-theme-primary-200 { --tw-gradient-to: var(--color-primary-200); }
.to-theme-primary-500 { --tw-gradient-to: var(--color-primary-500); }
.to-theme-primary-600 { --tw-gradient-to: var(--color-primary-600); }
.to-theme-primary-700 { --tw-gradient-to: var(--color-primary-700); }
.to-theme-primary-800 { --tw-gradient-to: var(--color-primary-800); }
.to-theme-primary-900 { --tw-gradient-to: var(--color-primary-900); }

.from-theme-accent-100 { --tw-gradient-from: var(--color-accent-100); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(240, 247, 247, 0)); }
.to-theme-accent-200 { --tw-gradient-to: var(--color-accent-200); }

/* Button styles with Maisha Bora colors */
.btn-primary-Maisha Bora {
  background-color: var(--color-primary-500);
  color: var(--color-white);
  transition: all 0.3s ease;
}

.btn-primary-Maisha Bora:hover {
  background-color: var(--color-primary-600);
  transform: scale(1.02);
}

.btn-secondary-Maisha Bora {
  background-color: var(--color-secondary-500);
  color: var(--color-white);
  transition: all 0.3s ease;
}

.btn-secondary-Maisha Bora:hover {
  background-color: var(--color-secondary-600);
  transform: scale(1.02);
}

/* Page title styling */
.page-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--color-secondary-800);
}