:root {
	--page-bg-1: #131313;
	--page-bg-2: #0E0E0E;
	--text-primary: #FFFFFF;
	--text-muted: #A8A8A8;
	--card-shadow: none;
	--card-border: transparent;
}

:root[data-theme="light"] {
	--page-bg-1: #FFFFFF;
	--page-bg-2: #F7F4EC;
	--text-primary: #131313;
	--text-muted: #6B6B6B;
	--card-shadow: 0 4px 24px rgba(19, 19, 19, 0.08);
	--card-border: #ECE6D8;
}

body {
	background-image: radial-gradient(161.34% 61.22% at 16.38% 48.83%, var(--page-bg-1) 0%, var(--page-bg-2) 100%);
}

h1, .title-h1,
h2, .title-h2,
h3, .title-h3,
p, .text,
.text-small,
a {
	color: var(--text-primary);
}

a:hover {
	color: var(--text-primary);
	opacity: 0.7;
}

a:focus,
a:active {
	color: var(--text-primary);
	opacity: 0.6;
}

/* Services tab labels sit directly on the page (no card behind them) */
.services__tab {
	color: var(--text-primary);
}

/* Example category navigation links / review text sit directly on the page */
.examples-section__menu-link {
	color: var(--text-muted);
}

.examples-section__menu-link--active {
	color: var(--text-primary);
}

.examples-section__button[data-prev="-1"] svg path {
	stroke: var(--text-muted);
}

.examples-section__button[data-prev="-1"] .examples-section__button-text {
	color: var(--text-muted);
}

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

/* Cards that are already white in both themes get a touch of separation
   once the page around them stops being solid black */
.geography__wrapper,
.team__wrapper {
	box-shadow: var(--card-shadow);
	border: 1px solid var(--card-border);
}

/* These cards are permanently white (both themes) — their text must stay
   dark regardless of --text-primary, otherwise dark mode makes it white-on-white. */
.geography__wrapper h1, .geography__wrapper h2, .geography__wrapper h3,
.geography__wrapper .title-h1, .geography__wrapper .title-h2, .geography__wrapper .title-h3,
.geography__wrapper p, .geography__wrapper .text, .geography__wrapper .text-small,
.team__wrapper h1, .team__wrapper h2, .team__wrapper h3,
.team__wrapper .title-h1, .team__wrapper .title-h2, .team__wrapper .title-h3,
.team__wrapper p, .team__wrapper .text, .team__wrapper .text-small {
	color: #131313;
}

/* Header, hero banner and footer stay permanently dark for brand consistency,
   regardless of the selected theme (matches the black + gold identity). */
.header {
	background-color: #131313;
	background-image: linear-gradient(rgba(19, 19, 19, 0.6), rgba(19, 19, 19, 0.6)), url('../img/placeholder.svg');
}

.footer {
	background-color: #131313;
}

.header h1, .header h2, .header h3,
.header .title-h1, .header .title-h2, .header .title-h3,
.header p, .header .text, .header .text-small,
.footer h1, .footer h2, .footer h3,
.footer .title-h1, .footer .title-h2, .footer .title-h3,
.footer p, .footer .text, .footer .text-small {
	color: #FFFFFF;
}

/* Photo cards with a dark gradient overlay keep white text regardless of theme */
.examples__gallery-item h3,
.examples__gallery-item .examples__gallery-text,
.team__item--wrappper .team__name,
.team__item--wrappper .team__position,
.team__item--wrappper .team__empl-descr {
	color: #FFFFFF;
}

/* Theme toggle control (mirrors .lang-switch, lives on the always-dark header) */
.theme-switch {
	display: flex;
	align-items: center;
	gap: 2px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 20px;
	padding: 2px;
	flex: 0 0 auto;
}

.theme-switch__btn {
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.6;
	transition: all 0.2s ease;
	color: #FFFFFF;
}

.theme-switch__btn svg {
	width: 16px;
	height: 16px;
	display: block;
}

.theme-switch__btn:hover {
	opacity: 1;
}

.theme-switch__btn.active {
	background: #FFFFFF;
	color: #131313;
	opacity: 1;
}

@media screen and (max-width: 1200px) {
	.theme-switch {
		display: none;
		order: 1;
	}

	.header-menu.responsive .theme-switch {
		display: flex;
	}
}

@media screen and (max-width: 650px) {
	.header-menu.responsive .theme-switch {
		align-self: flex-start;
	}
}