/* BASE CSS OSTEOPATHIE DE STREEK */
/* FORWARD / BRAVEBOYS */

/* ============================
   ROOT VARIABLES
============================ */

:root {
	/* Colors */
	--color-black: #000000;
	--color-blue: #5395C3;
	--color-sand: #C0A798;
	--color-softsand: #C7AE9E;
	--color-white: #FFFFFF;

	--color-darkgray: #7A7D80;
	--color-lightgray: #F0F0F0;
	--color-lightestgray: #F7F7F7;
	--color-midgray2: #CFCFCF;

	--text-color: #111111;
	--text-color-white: #FFFFFF;

	/* Typography */
	--font-family-base: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-family-paragraph: 'Eina 01', 'Eina01', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-family-buttons: 'Eina 01', 'Eina01', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--font-size-base: 1rem;
	--font-size-h1: 2.5rem;
	--font-size-h2: 2rem;
	--font-size-h3: 1.5rem;
	--line-height-base: 1.6;
	--line-height-heading: 1.25;
	--letter-spacing-normal: 0;
	--letter-spacing-tight: -0.02em;

	/* Spacing */
	--spacing-xxs: 0.25rem;
	--spacing-xs: 0.5rem;
	--spacing-sm: 0.75rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-xxl: 3rem;

	/* Radius */
	--radius-sm: 0.5rem;
	--radius-md: 1rem;
	--radius-lg: 1.5rem;
	--radius-pill: 999px;

	/* Border */
	--border-color: rgba(0, 0, 0, 0.08);
	--border-width: 1px;

	/* Transition – alles all .2s ease */
	--transition: all 0.2s ease;
	--transition-fast: all 0.2s ease;
	--transition-normal: all 0.2s ease;

	/* Shadow */
	--shadow-soft: 0 8px 20px rgba(0, 0, 0, 0.05);

	/* Layout */
	--max-width-content: 1200px;
}


/* ============================
   GLOBAL ELEMENTS
============================ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	background-color: var(--color-white);
	color: var(--text-color);
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	margin: 0;
	padding: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* Paragrafen: Eina + #222 */
p {
	color: var(--text-color);
	font-family: var(--font-family-paragraph);
	margin-bottom: var(--spacing-md);
}


/* ============================
   LINKS & INTERACTIONS
============================ */

a {
	color: var(--color-blue);
	cursor: pointer;
	text-decoration: none;
	transition: var(--transition);
}

a:hover,
a:focus-visible {
	color: var(--color-sand);
	text-decoration: none;
}

button {
	background-color: var(--color-blue);
	border: none;
	border-radius: var(--radius-pill);
	color: var(--color-white);
	cursor: pointer;
	font-family: var(--font-family-base);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: var(--letter-spacing-normal);
	line-height: 1;
	outline: none;
	padding: 0.85rem 1.6rem;
	transition: var(--transition);
}

button:hover,
button:focus-visible {
	background-color: var(--color-sand);
	color: var(--color-black);
}


/* ============================
   TYPOGRAPHY
============================ */

h1,
h2,
h3,
h4 {
	color: var(--text-color);
	font-family: var(--font-family-base);
	font-weight: 600;
	letter-spacing: var(--letter-spacing-tight);
	line-height: var(--line-height-heading);
	margin-bottom: var(--spacing-md);
	margin-top: 0;
}

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
}

h3 {
	font-size: var(--font-size-h3);
}


/* ============================
   BASIC UTILITIES
============================ */

img {
	display: block;
	height: auto;
	max-width: 100%;
}

.section {
	padding-top: var(--spacing-xxl);
	padding-bottom: var(--spacing-xxl);
}

.section--light {
	background-color: var(--color-lightestgray);
}

.section--blue {
	background-color: var(--color-blue);
	color: var(--text-color-white);
}

.section--blue p {
	color: rgba(255, 255, 255, 0.9);
}


/* ============================
   BUTTON VARIANTS (GENERIC)
============================ */

.btn {
	align-items: center;
	border-radius: var(--radius-pill);
	display: inline-flex;
	font-size: 0.95rem;
	font-weight: 500;
	gap: 0.5rem;
	justify-content: center;
	line-height: 1;
	padding: 0.85rem 1.6rem;
	transition: var(--transition);
}

.btn--primary {
	background-color: var(--color-blue);
	color: var(--text-color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--color-sand);
	color: var(--text-color);
}

.btn--outline {
	background-color: transparent;
	border: 1px solid var(--color-blue);
	color: var(--color-blue);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	background-color: var(--color-blue);
	color: var(--text-color-white);
}


/* ============================
   LAYOUT HELPERS
============================ */

.container-narrow {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width-content);
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}


/* ============================
   RESPONSIVE TYPOGRAPHY
============================ */

@media (max-width: 575.98px) {
	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.6rem;
	}
}

@media (max-width: 991.98px) {
	.section {
		padding-top: var(--spacing-xl);
		padding-bottom: var(--spacing-xl);
	}
}

/* 992 - 1199 */
@media (min-width: 992px) and (max-width: 1199.98px) {
	:root {
		--font-size-h1: 2.4rem;
		--font-size-h2: 1.9rem;
	}
}

/* 1200 - 1399 */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	:root {
		--font-size-h1: 2.6rem;
		--font-size-h2: 2.1rem;
	}
}

/* 1400+ */
@media (min-width: 1400px) {
	:root {
		--font-size-h1: 2.8rem;
		--font-size-h2: 2.2rem;
	}
}