/* Dynamic theme overrides using CSS variables to avoid Tailwind static color caching */
:root {
    --primary-color: #E53935; /* Will be overridden by JavaScript with config values */
    --primary-color-dark: #B71C1C; /* Will be overridden by JavaScript with config values */
}

.bg-primary { background-color: var(--primary-color) !important; }
.text-primary { color: var(--primary-color) !important; }
.border-primary { border-color: var(--primary-color) !important; }
.hover\:bg-primary:hover { background-color: var(--primary-color) !important; }
.hover\:text-primary:hover { color: var(--primary-color) !important; }

/* Ensure hover/focus white can override text-primary important */
.hover\:text-white:hover { color: #ffffff !important; }
.focus\:text-white:focus { color: #ffffff !important; }
.active\:text-white:active { color: #ffffff !important; }

.bg-dark { background-color: var(--primary-color-dark) !important; }
.hover\:bg-dark:hover { background-color: var(--primary-color-dark) !important; }

/* Luxury gradient backgrounds for tier cards */
.tier-diamond {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.tier-gold {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.tier-silver {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.tier-basic {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}