:root {
  /* Kentours Sacco Brand Colors */
  
  /* Primary Color - Orange (from logo) */
  --color-primary-50: #FFFAF5;
  --color-primary-100: #FFF4E6;
  --color-primary-200: #FFE4B3;
  --color-primary-300: #FFD480;
  --color-primary-400: #FFA500;
  --color-primary-500: #FF8C00;
  --color-primary-600: #FF7700;
  --color-primary-700: #E66A00;
  --color-primary-800: #CC5E00;
  --color-primary-900: #B35200;

  /* Secondary Color - Professional Blue */
  --color-secondary-50: #EFF6FF;
  --color-secondary-100: #DBEAFE;
  --color-secondary-200: #BFDBFE;
  --color-secondary-300: #93C5FD;
  --color-secondary-400: #60A5FA;
  --color-secondary-500: #3B82F6;
  --color-secondary-600: #2563EB;
  --color-secondary-700: #1D4ED8;
  --color-secondary-800: #1E40AF;
  --color-secondary-900: #1E3A8A;

  /* Accent Color - Light Blue */
  --color-accent-100: #F0F9FF;
  --color-accent-200: #E0F2FE;
  --color-accent-300: #BAE6FD;
  --color-accent-400: #7DD3FC;
  --color-accent-500: #38BDF8;
  --color-accent-600: #0EA5E9;
  --color-accent-700: #0284C7;
  --color-accent-800: #0369A1;
  --color-accent-900: #075985;

  /* 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 Kentours Sacco */
[data-theme="kentours_sacco"] {
  --color-primary-50: #FFFAF5;
  --color-primary-100: #FFF4E6;
  --color-primary-200: #FFE4B3;
  --color-primary-300: #FFD480;
  --color-primary-400: #FFA500;
  --color-primary-500: #FF8C00;
  --color-primary-600: #FF7700;
  --color-primary-700: #E66A00;
  --color-primary-800: #CC5E00;
  --color-primary-900: #B35200;
  
  --color-secondary-50: #EFF6FF;
  --color-secondary-100: #DBEAFE;
  --color-secondary-200: #BFDBFE;
  --color-secondary-300: #93C5FD;
  --color-secondary-400: #60A5FA;
  --color-secondary-500: #3B82F6;
  --color-secondary-600: #2563EB;
  --color-secondary-700: #1D4ED8;
  --color-secondary-800: #1E40AF;
  --color-secondary-900: #1E3A8A;
  
  --color-accent-100: #F0F9FF;
  --color-accent-200: #E0F2FE;
  --color-accent-300: #BAE6FD;
  --color-accent-400: #7DD3FC;
  --color-accent-500: #38BDF8;
  --color-accent-600: #0EA5E9;
  --color-accent-700: #0284C7;
  --color-accent-800: #0369A1;
  --color-accent-900: #075985;
}

/* 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-kentours { 
  background: linear-gradient(to bottom, #FFFFFF 0%, #38BDF8 50%, #3B82F6 100%); 
}

.bg-gradient-kentours-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)); }

.from-theme-primary-600 { --tw-gradient-from: var(--color-primary-600); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 119, 0, 0)); }
.to-theme-primary-700 { --tw-gradient-to: var(--color-primary-700); }
.from-theme-primary-700 { --tw-gradient-from: var(--color-primary-700); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(230, 106, 0, 0)); }
.to-theme-primary-800 { --tw-gradient-to: var(--color-primary-800); }

.from-theme-primary-100 { --tw-gradient-from: var(--color-primary-100); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 244, 230, 0)); }
.to-theme-primary-200 { --tw-gradient-to: var(--color-primary-200); }

.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 Kentours colors */
.btn-primary-kentours {
  background-color: var(--color-primary-500);
  color: var(--color-white);
  transition: all 0.3s ease;
}

.btn-primary-kentours:hover {
  background-color: var(--color-primary-600);
  transform: scale(1.02);
}

.btn-secondary-kentours {
  background-color: var(--color-secondary-500);
  color: var(--color-white);
  transition: all 0.3s ease;
}

.btn-secondary-kentours: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);
}
