:root {
  /* Primary Color */
  --color-primary-500: #3cacbc;


  /* Secondary Color */
  --color-secondary-500: #ec743c;


  /* Derived shades (optional) */
  --color-primary-400: #73f764;
  --color-primary-600: #46d62f;

  /* Other colors */
  --color-success-500: #22c55e;
  --color-error-500: #ef4444;
  --color-warning-500: #f59e0b;
}

/* Theme-specific (still using Port Sacco by default) */
[data-theme="port_sacco"] {
  --color-primary-500: #3cacbc;
  --color-primary-400: #73f764;
  --color-primary-600: #46d62f;
}

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



.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-primary-light { color: var(--color-primary-400); }
.text-theme-primary-dark { color: var(--color-primary-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); }

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