:root {
  /* Ports Sacco Brand Colors */
  
  /* Primary Color - Orange (from logo) */
  --color-primary-50: #FFF7F3;
  --color-primary-100: #FFE7DC;
  --color-primary-200: #FFC7B2;
  --color-primary-300: #FFA17F;
  --color-primary-400: #F78552;
  --color-primary-500: #EF733B;
  --color-primary-600: #D85E28;
  --color-primary-700: #B84B1E;
  --color-primary-800: #953E1B;
  --color-primary-900: #793519;

  /* Secondary Color - Teal (from logo) */
  --color-secondary-50: #F0FCFD;
  --color-secondary-100: #D8F5F7;
  --color-secondary-200: #ACE9EE;
  --color-secondary-300: #7AD9E1;
  --color-secondary-400: #4CC2CC;
  --color-secondary-500: #30AFB9;
  --color-secondary-600: #238E97;
  --color-secondary-700: #1F737B;
  --color-secondary-800: #1F5D63;
  --color-secondary-900: #1C4D52;

  /* Accent Color - Light Teal */
  --color-accent-100: #EAFBFC;
  --color-accent-200: #CFF3F6;
  --color-accent-300: #A9E7EC;
  --color-accent-400: #72D1DA;
  --color-accent-500: #30AFB9;
  --color-accent-600: #238E97;
  --color-accent-700: #1F737B;
  --color-accent-800: #1F5D63;
  --color-accent-900: #1C4D52;

  /* 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: #30AFB9;
}

/* Theme-specific for Ports Sacco */
[data-theme="Ports_sacco"] {
  --color-primary-50: #FFF7F3;
  --color-primary-100: #FFE7DC;
  --color-primary-200: #FFC7B2;
  --color-primary-300: #FFA17F;
  --color-primary-400: #F78552;
  --color-primary-500: #EF733B;
  --color-primary-600: #D85E28;
  --color-primary-700: #B84B1E;
  --color-primary-800: #953E1B;
  --color-primary-900: #793519;
  
  --color-secondary-50: #F0FCFD;
  --color-secondary-100: #D8F5F7;
  --color-secondary-200: #ACE9EE;
  --color-secondary-300: #7AD9E1;
  --color-secondary-400: #4CC2CC;
  --color-secondary-500: #30AFB9;
  --color-secondary-600: #238E97;
  --color-secondary-700: #1F737B;
  --color-secondary-800: #1F5D63;
  --color-secondary-900: #1C4D52;
  
  --color-accent-100: #EAFBFC;
  --color-accent-200: #CFF3F6;
  --color-accent-300: #A9E7EC;
  --color-accent-400: #72D1DA;
  --color-accent-500: #30AFB9;
  --color-accent-600: #238E97;
  --color-accent-700: #1F737B;
  --color-accent-800: #1F5D63;
  --color-accent-900: #1C4D52;
}

/* 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); }

.hover\:border-theme-primary-400:hover { border-color: var(--color-primary-400); }
.hover\:border-theme-secondary-400:hover { border-color: var(--color-secondary-400); }
.group:hover .group-hover\:bg-theme-primary-200 { background-color: var(--color-primary-200); }
.group:hover .group-hover\:bg-theme-secondary-200 { background-color: var(--color-secondary-200); }
.group:hover .group-hover\:text-theme-primary-800 { color: var(--color-primary-800); }
.group:hover .group-hover\:text-theme-secondary-800 { color: var(--color-secondary-800); }
.ring-theme-primary-200 { --tw-ring-color: var(--color-primary-200); }
.ring-theme-secondary-200 { --tw-ring-color: var(--color-secondary-200); }
.focus\:ring-theme-primary-500:focus { --tw-ring-color: var(--color-primary-500); }
.focus\:ring-theme-secondary-500:focus { --tw-ring-color: var(--color-secondary-500); }
.focus\:ring-theme-accent-500:focus { --tw-ring-color: var(--color-accent-500); }
.focus\:border-theme-primary-500:focus { border-color: var(--color-primary-500); }
.focus\:border-theme-secondary-500:focus { border-color: var(--color-secondary-500); }
.focus\:border-theme-accent-500:focus { border-color: var(--color-accent-500); }

/* 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-Ports { 
  background: linear-gradient(to bottom, #FFFFFF 0%, #30AFB9 52%, #EF733B 100%); 
}

.bg-gradient-Ports-light { 
  background: linear-gradient(to bottom, #FFFFFF 0%, #D8F5F7 50%, #FFE7DC 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(216, 94, 40, 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-600 { --tw-gradient-to: var(--color-primary-600); }
.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(184, 75, 30, 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, 231, 220, 0)); }
.to-theme-primary-200 { --tw-gradient-to: var(--color-primary-200); }

.from-theme-secondary-600 { --tw-gradient-from: var(--color-secondary-600); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(35, 142, 151, 0)); }
.to-theme-secondary-50 { --tw-gradient-to: var(--color-secondary-50); }
.to-theme-secondary-700 { --tw-gradient-to: var(--color-secondary-700); }
.from-theme-secondary-100 { --tw-gradient-from: var(--color-secondary-100); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(216, 245, 247, 0)); }
.to-theme-secondary-200 { --tw-gradient-to: var(--color-secondary-200); }
.via-theme-primary-500 { --tw-gradient-stops: var(--tw-gradient-from), var(--color-primary-500), var(--tw-gradient-to, rgba(239, 115, 59, 0)); }
.via-theme-secondary-500 { --tw-gradient-stops: var(--tw-gradient-from), var(--color-secondary-500), var(--tw-gradient-to, rgba(48, 175, 185, 0)); }

.from-theme-accent-100 { --tw-gradient-from: var(--color-accent-100); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(234, 251, 252, 0)); }
.via-theme-accent-100 { --tw-gradient-stops: var(--tw-gradient-from), var(--color-accent-100), var(--tw-gradient-to, rgba(234, 251, 252, 0)); }
.to-theme-accent-200 { --tw-gradient-to: var(--color-accent-200); }

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

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

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

.btn-secondary-Ports: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);
}