/* Custom Styles für Zahnarztpraxis Dr. med. dent. Alexandra Rutar */

body {
	font-family: 'Inter', sans-serif;
}

/* Smooth scrolling für Anker-Links */
html {
	scroll-behavior: smooth;
	scroll-padding-top: 120px;
}

@media (min-width: 640px) {
	html {
		scroll-padding-top: 112px;
	}
}

/* Custom color matching logo: R:75 G:167 B:222 (#4BA7DE) */
:root {
	--custom-primary: #4BA7DE;
	--custom-primary-dark: #3A8AB8;
	--custom-primary-light: #6BB9E6;
	--custom-primary-50: #E8F4FA;
	--custom-primary-100: #D1E9F5;
	--custom-primary-200: #A3D3EB;
	--custom-primary-300: #75BDE1;
	--custom-primary-400: #4BA7DE;
	--custom-primary-500: #4BA7DE;
	--custom-primary-600: #3A8AB8;
	--custom-primary-700: #2F6E94;
	--custom-primary-800: #245270;
	--custom-primary-900: #1A364C;
}

/* Custom classes to replace teal */
.text-custom-primary {
	color: var(--custom-primary);
}
.text-custom-primary-dark {
	color: var(--custom-primary-dark);
}
.text-custom-primary-light {
	color: var(--custom-primary-light);
}
.bg-custom-primary {
	background-color: var(--custom-primary);
}
.bg-custom-primary-dark {
	background-color: var(--custom-primary-dark);
}
.bg-custom-primary-light {
	background-color: var(--custom-primary-light);
}
.bg-custom-primary-50 {
	background-color: var(--custom-primary-50);
}
.bg-custom-primary-100 {
	background-color: var(--custom-primary-100);
}
.bg-custom-primary-200 {
	background-color: var(--custom-primary-200);
}
.bg-custom-primary-300 {
	background-color: var(--custom-primary-300);
}
.bg-custom-primary-400 {
	background-color: var(--custom-primary-400);
}
.bg-custom-primary-500 {
	background-color: var(--custom-primary-500);
}
.bg-custom-primary-600 {
	background-color: var(--custom-primary-600);
}
.bg-custom-primary-700 {
	background-color: var(--custom-primary-700);
}
.bg-custom-primary-800 {
	background-color: var(--custom-primary-800);
}
.bg-custom-primary-900 {
	background-color: var(--custom-primary-900);
}
.hover\:bg-custom-primary-dark:hover {
	background-color: var(--custom-primary-dark);
}
.hover\:bg-custom-primary-light:hover {
	background-color: var(--custom-primary-light);
}
.hover\:text-custom-primary:hover {
	color: var(--custom-primary);
}
.border-custom-primary {
	border-color: var(--custom-primary);
}
.border-custom-primary-100 {
	border-color: var(--custom-primary-100);
}
.shadow-custom-primary\/20 {
	box-shadow: 0 10px 15px -3px rgba(75, 167, 222, 0.2);
}
.shadow-custom-primary-20 {
	box-shadow: 0 10px 15px -3px rgba(75, 167, 222, 0.2);
}
.shadow-custom-primary\/10 {
	box-shadow: 0 4px 6px -1px rgba(75, 167, 222, 0.1);
}