/* ============================================
   Theme Color System
   Base color: rgb(79, 70, 229) (indigo-600)
   To change the store color, modify the RGB values below.
   ============================================ */

:root {
    --theme-r: 209;
    --theme-g: 160;
    --theme-b: 166;
}

/* ---- Backgrounds ---- */
.bg-theme-50  { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.bg-theme-100 { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.bg-theme-200 { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.bg-theme-300 { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.bg-theme-400 { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.bg-theme-500 { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.bg-theme-600 { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.bg-theme-700 { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.bg-theme-800 { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.bg-theme-900 { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Text ---- */
.text-theme-50  { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.text-theme-100 { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.text-theme-200 { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.text-theme-300 { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.text-theme-400 { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.text-theme-500 { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.text-theme-600 { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.text-theme-700 { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.text-theme-800 { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.text-theme-900 { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Borders ---- */
.border-theme-50  { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.border-theme-100 { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.border-theme-200 { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.border-theme-300 { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.border-theme-400 { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.border-theme-500 { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.border-theme-600 { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.border-theme-700 { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.border-theme-800 { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.border-theme-900 { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Hover Backgrounds ---- */
.hover\:bg-theme-50:hover  { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.hover\:bg-theme-100:hover { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.hover\:bg-theme-200:hover { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.hover\:bg-theme-300:hover { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.hover\:bg-theme-400:hover { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.hover\:bg-theme-500:hover { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.hover\:bg-theme-600:hover { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.hover\:bg-theme-700:hover { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.hover\:bg-theme-800:hover { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.hover\:bg-theme-900:hover { background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Hover Text ---- */
.hover\:text-theme-50:hover  { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.hover\:text-theme-100:hover { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.hover\:text-theme-200:hover { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.hover\:text-theme-300:hover { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.hover\:text-theme-400:hover { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.hover\:text-theme-500:hover { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.hover\:text-theme-600:hover { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.hover\:text-theme-700:hover { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.hover\:text-theme-800:hover { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.hover\:text-theme-900:hover { color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Focus Ring ---- */
.focus\:ring-theme-50:focus  { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.focus\:ring-theme-100:focus { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.focus\:ring-theme-200:focus { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.focus\:ring-theme-300:focus { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.focus\:ring-theme-400:focus { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.focus\:ring-theme-500:focus { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.focus\:ring-theme-600:focus { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.focus\:ring-theme-700:focus { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.focus\:ring-theme-800:focus { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.focus\:ring-theme-900:focus { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Focus Border ---- */
.focus\:border-theme-50:focus  { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.focus\:border-theme-100:focus { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.focus\:border-theme-200:focus { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.focus\:border-theme-300:focus { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.focus\:border-theme-400:focus { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.focus\:border-theme-500:focus { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.focus\:border-theme-600:focus { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.focus\:border-theme-700:focus { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.focus\:border-theme-800:focus { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.focus\:border-theme-900:focus { border-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Ring (non-focus) ---- */
.ring-theme-50  { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.ring-theme-100 { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.ring-theme-200 { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.ring-theme-300 { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.ring-theme-400 { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.ring-theme-500 { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.ring-theme-600 { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.ring-theme-700 { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.ring-theme-800 { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.ring-theme-900 { --tw-ring-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Gradient From ---- */
.from-theme-50  { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.from-theme-100 { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.from-theme-200 { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.from-theme-300 { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.from-theme-400 { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.from-theme-500 { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.from-theme-600 { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.from-theme-700 { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.from-theme-800 { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.from-theme-900 { --tw-gradient-from: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Gradient To ---- */
.to-theme-50  { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.to-theme-100 { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.to-theme-200 { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.to-theme-300 { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.to-theme-400 { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.to-theme-500 { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.to-theme-600 { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.to-theme-700 { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.to-theme-800 { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.to-theme-900 { --tw-gradient-to: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Inset Shadow ---- */
.inset-shadow-theme-50  { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.inset-shadow-theme-100 { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.inset-shadow-theme-200 { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.2); }
.inset-shadow-theme-300 { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.3); }
.inset-shadow-theme-400 { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.4); }
.inset-shadow-theme-500 { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.5); }
.inset-shadow-theme-600 { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.6); }
.inset-shadow-theme-700 { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.7); }
.inset-shadow-theme-800 { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8); }
.inset-shadow-theme-900 { --tw-inset-shadow: inset 0 2px 4px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.9); }

/* ---- Shadow (box shadow) ---- */
.shadow-theme-50  { --tw-shadow: 0 1px 2px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.05); }
.shadow-theme-100 { --tw-shadow: 0 1px 3px 0 rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1), 0 1px 2px -1px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.shadow-theme-200 { --tw-shadow: 0 4px 6px -1px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1), 0 2px 4px -2px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.shadow-theme-300 { --tw-shadow: 0 10px 15px -3px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1), 0 4px 6px -4px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.shadow-theme-400 { --tw-shadow: 0 20px 25px -5px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1), 0 8px 10px -6px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.1); }
.shadow-theme-500 { --tw-shadow: 0 25px 50px -12px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.25); }
.shadow-theme-600 { --tw-shadow: 0 25px 50px -12px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.35); }
.shadow-theme-700 { --tw-shadow: 0 25px 50px -12px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.45); }
.shadow-theme-800 { --tw-shadow: 0 25px 50px -12px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.55); }
.shadow-theme-900 { --tw-shadow: 0 25px 50px -12px rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.65); }