:root {
  --primary-color: #3B82F6; /* blue-600 */
  --primary-color-hover: #2563EB; /* blue-700 */
  --primary-color-light: #EFF6FF; /* blue-50 */
  --primary-text-color: #1E40AF; /* blue-800 */
  --primary-border-color: #BFDBFE; /* blue-200 */

  --secondary-color: #475569; /* slate-600 */
  --secondary-text-color: #334155; /* slate-700 */
  --secondary-border-color: #E2E8F0; /* slate-200 */

  --success-color: #16A34A; /* green-600 */
  --success-bg-color: #F0FDF4; /* green-50 */
  --success-text-color: #166534; /* green-800 */
  --success-border-color: #BBF7D0; /* green-200 */

  --danger-color: #DC2626; /* red-600 */
  --danger-bg-color: #FEF2F2; /* red-50 */
  --danger-text-color: #991B1B; /* red-800 */
  --danger-border-color: #FECACA; /* red-200 */

  --warning-color: #FBBF24; /* yellow-600 */
  --warning-bg-color: #FFFBEB; /* yellow-50 */
  --warning-text-color: #B45309; /* yellow-800 */
  --warning-border-color: #FDE68A; /* yellow-200 */

  --text-color-primary: #1F2937; /* gray-900 */
  --text-color-secondary: #4B5563; /* gray-600 */
  --text-color-tertiary: #6B7280; /* gray-500 */

  --bg-color-primary: #FFFFFF;
  --bg-color-secondary: #F9FAFB; /* gray-50 */
  --bg-color-tertiary: #F3F4F6;
  
  --border-color-primary: #E5E7EB; /* gray-200 */
  --border-color-secondary: #D1D5DB; /* gray-300 */
}

.theme-abas {
  --primary-color: #21B7B3;
  --primary-color-hover: #1fA6A2; /* slightly darker */
  --primary-color-light: #E0F7F6;
  --primary-text-color: #1A9490;
  --primary-border-color: #A0E0DE;
}