/**
 * HIRS Custom Colors - 離線支援
 * 將 Tailwind config 中的自定義色轉為 CSS
 */

:root {
    /* teal-custom */
    --color-teal-custom-50: #e6f2f2;
    --color-teal-custom-100: #D5EEEE;
    --color-teal-custom-500: #205555;
    --color-teal-custom-600: #194444;
    --color-teal-custom-700: #123333;

    /* water */
    --color-water-100: #dbeafe;
    --color-water-500: #3b82f6;

    /* food */
    --color-food-100: #fef3c7;
    --color-food-500: #f59e0b;

    /* power */
    --color-power-100: #fef9c3;
    --color-power-500: #eab308;

    /* medical */
    --color-medical-100: #fee2e2;
    --color-medical-500: #ef4444;

    /* equipment */
    --color-equipment-100: #f3f4f6;
    --color-equipment-500: #6b7280;

    /* emergency */
    --color-emergency-500: #dc2626;
    --color-emergency-600: #b91c1c;

    /* community */
    --color-community-100: #e8eaf2;
    --color-community-500: #4E5488;

    /* buy */
    --color-buy-100: #f3e8fa;
    --color-buy-500: #6E3398;
    --color-buy-600: #5a2a7d;
}

/* =============== teal-custom =============== */
.bg-teal-custom-50 { background-color: var(--color-teal-custom-50) !important; }
.bg-teal-custom-100 { background-color: var(--color-teal-custom-100) !important; }
.bg-teal-custom-500 { background-color: var(--color-teal-custom-500) !important; }
.bg-teal-custom-600 { background-color: var(--color-teal-custom-600) !important; }
.bg-teal-custom-700 { background-color: var(--color-teal-custom-700) !important; }
.text-teal-custom-50 { color: var(--color-teal-custom-50) !important; }
.text-teal-custom-100 { color: var(--color-teal-custom-100) !important; }
.text-teal-custom-500 { color: var(--color-teal-custom-500) !important; }
.text-teal-custom-600 { color: var(--color-teal-custom-600) !important; }
.text-teal-custom-700 { color: var(--color-teal-custom-700) !important; }
.border-teal-custom-500 { border-color: var(--color-teal-custom-500) !important; }
.border-teal-custom-600 { border-color: var(--color-teal-custom-600) !important; }
.ring-teal-custom-500 { --tw-ring-color: var(--color-teal-custom-500) !important; }
.focus\:ring-teal-custom-500:focus { --tw-ring-color: var(--color-teal-custom-500) !important; }
.hover\:bg-teal-custom-600:hover { background-color: var(--color-teal-custom-600) !important; }
.hover\:bg-teal-custom-700:hover { background-color: var(--color-teal-custom-700) !important; }
.hover\:text-teal-custom-500:hover { color: var(--color-teal-custom-500) !important; }
.hover\:text-teal-custom-600:hover { color: var(--color-teal-custom-600) !important; }
.hover\:border-teal-custom-500:hover { border-color: var(--color-teal-custom-500) !important; }
.from-teal-custom-400 { --tw-gradient-from: #2dd4bf !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.from-teal-custom-500 { --tw-gradient-from: var(--color-teal-custom-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.to-teal-custom-600 { --tw-gradient-to: var(--color-teal-custom-600) !important; }
.to-cyan-400 { --tw-gradient-to: #22d3ee !important; }
.hover\:from-teal-custom-500:hover { --tw-gradient-from: var(--color-teal-custom-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.hover\:to-cyan-500:hover { --tw-gradient-to: #06b6d4 !important; }

/* Toggle switch - peer-checked variant */
.peer:checked ~ .peer-checked\:bg-teal-custom-500 { background-color: var(--color-teal-custom-500) !important; }
.peer:checked ~ .peer-checked\:after\:translate-x-full::after { transform: translateX(100%) !important; }
.peer:checked ~ .peer-checked\:after\:border-white::after { border-color: white !important; }

/* =============== water =============== */
.bg-water-100 { background-color: var(--color-water-100) !important; }
.bg-water-500 { background-color: var(--color-water-500) !important; }
.text-water-500 { color: var(--color-water-500) !important; }
.border-water-500 { border-color: var(--color-water-500) !important; }

/* =============== food =============== */
.bg-food-100 { background-color: var(--color-food-100) !important; }
.bg-food-500 { background-color: var(--color-food-500) !important; }
.text-food-500 { color: var(--color-food-500) !important; }
.border-food-500 { border-color: var(--color-food-500) !important; }

/* =============== power =============== */
.bg-power-100 { background-color: var(--color-power-100) !important; }
.bg-power-500 { background-color: var(--color-power-500) !important; }
.text-power-500 { color: var(--color-power-500) !important; }
.border-power-500 { border-color: var(--color-power-500) !important; }

/* =============== medical =============== */
.bg-medical-100 { background-color: var(--color-medical-100) !important; }
.bg-medical-500 { background-color: var(--color-medical-500) !important; }
.text-medical-500 { color: var(--color-medical-500) !important; }
.border-medical-500 { border-color: var(--color-medical-500) !important; }

/* =============== equipment =============== */
.bg-equipment-100 { background-color: var(--color-equipment-100) !important; }
.bg-equipment-500 { background-color: var(--color-equipment-500) !important; }
.text-equipment-500 { color: var(--color-equipment-500) !important; }
.border-equipment-500 { border-color: var(--color-equipment-500) !important; }

/* =============== emergency =============== */
.bg-emergency-500 { background-color: var(--color-emergency-500) !important; }
.bg-emergency-600 { background-color: var(--color-emergency-600) !important; }
.text-emergency-500 { color: var(--color-emergency-500) !important; }
.text-emergency-600 { color: var(--color-emergency-600) !important; }
.border-emergency-500 { border-color: var(--color-emergency-500) !important; }
.hover\:bg-emergency-600:hover { background-color: var(--color-emergency-600) !important; }
.from-emergency-500 { --tw-gradient-from: var(--color-emergency-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }

/* =============== community =============== */
.bg-community-100 { background-color: var(--color-community-100) !important; }
.bg-community-500 { background-color: var(--color-community-500) !important; }
.text-community-500 { color: var(--color-community-500) !important; }
.border-community-500 { border-color: var(--color-community-500) !important; }
.from-community-500 { --tw-gradient-from: var(--color-community-500) !important; }

/* =============== buy =============== */
.bg-buy-100 { background-color: var(--color-buy-100) !important; }
.bg-buy-500 { background-color: var(--color-buy-500) !important; }
.bg-buy-600 { background-color: var(--color-buy-600) !important; }
.text-buy-500 { color: var(--color-buy-500) !important; }
.text-buy-600 { color: var(--color-buy-600) !important; }
.border-buy-500 { border-color: var(--color-buy-500) !important; }
.hover\:bg-buy-600:hover { background-color: var(--color-buy-600) !important; }

/* =============== Gradient Utilities =============== */
/* 應急模式 / 粉紅色按鈕 / 漸層背景所需 */

:root {
    /* Additional standard colors for gradients */
    --color-amber-50: #fffbeb;
    --color-amber-100: #fef3c7;
    --color-amber-200: #fde68a;
    --color-amber-300: #fcd34d;
    --color-amber-400: #fbbf24;
    --color-amber-500: #f59e0b;
    --color-amber-600: #d97706;
    --color-amber-700: #b45309;
    --color-orange-500: #f97316;
    --color-pink-500: #ec4899;
    --color-pink-600: #db2777;
    --color-rose-500: #f43f5e;
    --color-rose-600: #e11d48;
    --color-indigo-50: #eef2ff;
    --color-indigo-100: #e0e7ff;
    --color-indigo-300: #a5b4fc;
    --color-indigo-500: #6366f1;
    --color-indigo-600: #4f46e5;
    --color-purple-500: #a855f7;
    --color-purple-600: #9333ea;
}

/* =============== Amber (SURGE Mode) =============== */
.bg-amber-50 { background-color: var(--color-amber-50) !important; }
.bg-amber-100 { background-color: var(--color-amber-100) !important; }
.bg-amber-200 { background-color: var(--color-amber-200) !important; }
.bg-amber-300 { background-color: var(--color-amber-300) !important; }
.bg-amber-400 { background-color: var(--color-amber-400) !important; }
.bg-amber-500 { background-color: var(--color-amber-500) !important; }
.bg-amber-600 { background-color: var(--color-amber-600) !important; }
.bg-amber-700 { background-color: var(--color-amber-700) !important; }
.text-amber-500 { color: var(--color-amber-500) !important; }
.text-amber-600 { color: var(--color-amber-600) !important; }
.text-amber-700 { color: var(--color-amber-700) !important; }
.border-amber-200 { border-color: var(--color-amber-200) !important; }
.border-amber-300 { border-color: var(--color-amber-300) !important; }
.border-amber-500 { border-color: var(--color-amber-500) !important; }
.hover\:bg-amber-400:hover { background-color: var(--color-amber-400) !important; }
.hover\:bg-amber-600:hover { background-color: var(--color-amber-600) !important; }
.hover\:border-amber-300:hover { border-color: var(--color-amber-300) !important; }
.from-amber-400 { --tw-gradient-from: var(--color-amber-400) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.from-amber-500 { --tw-gradient-from: var(--color-amber-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.to-orange-400 { --tw-gradient-to: #fb923c !important; }
.hover\:from-amber-500:hover { --tw-gradient-from: var(--color-amber-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.hover\:to-orange-500:hover { --tw-gradient-to: var(--color-orange-500) !important; }

/* =============== Yellow (Badge Notification Gradient) =============== */
:root {
    --color-yellow-50: #fefce8;
    --color-yellow-100: #fef9c3;
    --color-yellow-200: #fef08a;
    --color-yellow-300: #fde047;
    --color-yellow-400: #facc15;
    --color-yellow-500: #eab308;
    --color-yellow-600: #ca8a04;
}

.bg-yellow-500 { background-color: var(--color-yellow-500) !important; }
.text-yellow-500 { color: var(--color-yellow-500) !important; }
.border-yellow-300 { border-color: var(--color-yellow-300) !important; }
.to-yellow-500 { --tw-gradient-to: var(--color-yellow-500) !important; }

/* =============== Teal (Standard Tailwind - 引導我 Tab) =============== */
:root {
    --color-teal-50: #f0fdfa;
    --color-teal-100: #ccfbf1;
    --color-teal-200: #99f6e4;
    --color-teal-300: #5eead4;
    --color-teal-400: #2dd4bf;
    --color-teal-500: #14b8a6;
    --color-teal-600: #0d9488;
    --color-teal-700: #0f766e;
    --color-teal-800: #115e59;
    --color-teal-900: #134e4a;
}

.bg-teal-50 { background-color: var(--color-teal-50) !important; }
.bg-teal-100 { background-color: var(--color-teal-100) !important; }
.bg-teal-200 { background-color: var(--color-teal-200) !important; }
.bg-teal-500 { background-color: var(--color-teal-500) !important; }
.bg-teal-600 { background-color: var(--color-teal-600) !important; }
.bg-teal-700 { background-color: var(--color-teal-700) !important; }
.text-teal-500 { color: var(--color-teal-500) !important; }
.text-teal-600 { color: var(--color-teal-600) !important; }
.text-teal-700 { color: var(--color-teal-700) !important; }
.text-teal-800 { color: var(--color-teal-800) !important; }
.border-teal-200 { border-color: var(--color-teal-200) !important; }
.border-teal-500 { border-color: var(--color-teal-500) !important; }
.hover\:bg-teal-600:hover { background-color: var(--color-teal-600) !important; }
.hover\:text-teal-700:hover { color: var(--color-teal-700) !important; }

/* =============== Indigo Extended (REVIEW Mode) =============== */
.bg-indigo-50 { background-color: var(--color-indigo-50) !important; }
.bg-indigo-100 { background-color: var(--color-indigo-100) !important; }
.border-indigo-300 { border-color: var(--color-indigo-300) !important; }
.border-indigo-500 { border-color: var(--color-indigo-500) !important; }
.hover\:border-indigo-300:hover { border-color: var(--color-indigo-300) !important; }
.hover\:bg-indigo-600:hover { background-color: var(--color-indigo-600) !important; }

/* Orange */
.bg-orange-500 { background-color: var(--color-orange-500) !important; }
.text-orange-500 { color: var(--color-orange-500) !important; }
.to-orange-500 { --tw-gradient-to: var(--color-orange-500) !important; }

/* Pink */
.bg-pink-50 { background-color: #fdf2f8 !important; }
.bg-pink-100 { background-color: #fce7f3 !important; }
.bg-pink-500 { background-color: var(--color-pink-500) !important; }
.bg-pink-600 { background-color: var(--color-pink-600) !important; }
.text-pink-500 { color: var(--color-pink-500) !important; }
.text-pink-600 { color: var(--color-pink-600) !important; }
.border-pink-200 { border-color: #fbcfe8 !important; }
.from-pink-500 { --tw-gradient-from: var(--color-pink-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.to-pink-500 { --tw-gradient-to: var(--color-pink-500) !important; }
.hover\:bg-pink-600:hover { background-color: var(--color-pink-600) !important; }

/* Rose */
.bg-rose-500 { background-color: var(--color-rose-500) !important; }
.bg-rose-600 { background-color: var(--color-rose-600) !important; }
.text-rose-500 { color: var(--color-rose-500) !important; }
.from-rose-500 { --tw-gradient-from: var(--color-rose-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.to-rose-500 { --tw-gradient-to: var(--color-rose-500) !important; }

/* Indigo */
.bg-indigo-500 { background-color: var(--color-indigo-500) !important; }
.bg-indigo-600 { background-color: var(--color-indigo-600) !important; }
.text-indigo-500 { color: var(--color-indigo-500) !important; }
.from-indigo-500 { --tw-gradient-from: var(--color-indigo-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.to-indigo-500 { --tw-gradient-to: var(--color-indigo-500) !important; }

/* Purple */
.bg-purple-500 { background-color: var(--color-purple-500) !important; }
.bg-purple-600 { background-color: var(--color-purple-600) !important; }
.text-purple-500 { color: var(--color-purple-500) !important; }
.from-purple-500 { --tw-gradient-from: var(--color-purple-500) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent) !important; }
.to-purple-500 { --tw-gradient-to: var(--color-purple-500) !important; }
.to-purple-600 { --tw-gradient-to: var(--color-purple-600) !important; }

/* Gradient direction base */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}