/* css/style.css */

/* 1. Central Color Palette - Light Mode (Default) */
:root {
	--color-background: #FFFFFF;
	/* Clean White */
	--color-text: #065A60;
	/* Deep Teal */
	--color-primary: #FF6B6B;
	/* Bright Coral */
	--color-primary-dark: #E65C5C;
	/* Darker Coral for hover */
	--color-secondary: #FFD166;
	/* Sunny Yellow */

	/* Light Mode Specific */
	--bg-page: #F7FAFC;
	/* Light gray page background */
	--bg-card: #FFFFFF;
	/* White cards */
	--bg-section-alt: #F9FAFB;
	/* Alternate section background */
	--text-primary: #1F2937;
	/* Dark gray text */
	--text-secondary: #4B5563;
	/* Medium gray text */
	--text-muted: #6B7280;
	/* Muted text */
	--border-color: #E5E7EB;
	/* Light border */
	--shadow: rgba(0, 0, 0, 0.1);
	/* Light shadow */
}

/* 2. Dark Mode Color Palette */
[data-theme="dark"] {
	--color-background: #1F2937;
	--color-text: #F3F4F6;
	--color-primary: #FF6B6B;
	/* Keep primary color consistent */
	--color-primary-dark: #E65C5C;
	--color-secondary: #FFD166;

	/* Dark Mode Specific */
	--bg-page: #111827;
	/* Very dark background */
	--bg-card: #1F2937;
	/* Dark card background */
	--bg-section-alt: #374151;
	/* Alternate section background */
	--text-primary: #F9FAFB;
	/* Light text */
	--text-secondary: #E5E7EB;
	/* Slightly dimmer text */
	--text-muted: #9CA3AF;
	/* Muted text */
	--border-color: #374151;
	/* Dark border */
	--shadow: rgba(0, 0, 0, 0.3);
	/* Darker shadow */
}

/* 3. Smooth transition for theme changes */
body,
header,
footer,
main {
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* 4. Global Body and Layout Styles */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--bg-page);
	color: var(--text-primary);
	font-family: 'Inter', sans-serif;
}

main {
	flex-grow: 1;
}

/* 5. Hero Gradient for the Welcome Page */
.hero-gradient {
	background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
	/* Yellow to Coral */
}

/* 6. Helper classes to apply the color scheme */
.text-primary {
	color: var(--color-primary);
}

.hover\:text-primary:hover {
	color: var(--color-primary);
}

.hover\:text-primary-dark:hover {
	color: var(--color-primary-dark);
}

.bg-primary {
	background-color: var(--color-primary);
}

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

.border-primary {
	border-color: var(--color-primary);
}

.ring-primary {
	--tw-ring-color: var(--color-primary);
}

.text-teal {
	color: #139da6;
}

/* 7. Component-specific styles */
#quartier-switcher-button {
	transition: background-color 0.2s ease;
}

/* 8. Dark Mode Toggle Button Styles */
.dark-mode-toggle {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
	border-radius: 50%;
	border: none;
	cursor: pointer;

	background-color: var(--bg-section-alt);
	color: var(--text-primary);
	transition: all 0.3s ease;
	flex-shrink: 0;
}

.dark-mode-toggle:hover {
	background-color: var(--border-color);
	transform: scale(1.1);
}

.dark-mode-toggle i {
	font-size: 1.25rem;
}

/* 9. Dark Mode specific overrides for Tailwind classes */
[data-theme="dark"] .bg-white {
	background-color: var(--bg-card) !important;
}

[data-theme="dark"] .bg-gray-50 {
	background-color: var(--bg-section-alt) !important;
}

[data-theme="dark"] .bg-gray-900 {
	background-color: #0F172A !important;
}

[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
	color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-600 {
	color: var(--text-muted) !important;
}

[data-theme="dark"] .text-gray-900 {
	color: var(--text-primary) !important;
}

[data-theme="dark"] .border-gray-300,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-100 {
	border-color: var(--border-color) !important;
}

[data-theme="dark"] .shadow-sm,
[data-theme="dark"] .shadow-md,
[data-theme="dark"] .shadow-lg,
[data-theme="dark"] .shadow-xl,
[data-theme="dark"] .shadow-2xl {
	box-shadow: 0 0 20px var(--shadow) !important;
}

[data-theme="dark"] .hover\:bg-gray-50:hover,
[data-theme="dark"] .hover\:bg-gray-100:hover {
	background-color: #374151 !important;
}

/* 10. Gradient backgrounds in dark mode */
[data-theme="dark"] .bg-gradient-to-br.from-amber-50,
[data-theme="dark"] .bg-gradient-to-br.from-pink-50,
[data-theme="dark"] .bg-gradient-to-br.from-purple-50 {
	background: linear-gradient(to bottom right, #374151, #1F2937) !important;
}

/* 11. Card backgrounds in dark mode */
[data-theme="dark"] .rounded-2xl.bg-white,
[data-theme="dark"] .rounded-xl.bg-white {
	background-color: var(--bg-card) !important;
}

/* 12. Instagram Icon Hover - gleiche Farbe in beiden Modi */
[data-theme="dark"] a[href*="instagram"]:hover {
	color: #db2777 !important;
	/* pink-600 */
}

[data-theme="dark"] a[href*="instagram"]:hover i {
	color: #db2777 !important;
	/* pink-600 */
}