@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

:root {
	--primary: #6f583c;
	--primary-soft: #897052;
	--secondary: #5f5e5b;
	--background: #fcf9f4;
	--surface: #f0ede8;
	--surface-soft: #f6f3ee;
	--text: #1c1c19;
	--text-muted: #4e453c;
	--glass: rgba(255, 255, 255, 0.8);
}

html,
body {
	background-color: var(--background);
	color: var(--text);
}

body,
body *:not(.material-symbols-outlined) {
	font-family: 'Raleway', sans-serif;
}

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.serif-title,
.font-headline {
	font-family: 'Raleway', sans-serif;
}

.glass-nav {
	background-color: var(--glass);
	backdrop-filter: blur(20px);
}

.tonal-card:hover {
	background-color: var(--surface);
}

.bronze-gradient {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
}

/* Scroll margin for anchor links to account for fixed navbar */
[id] {
	scroll-margin-top: 180px;
}

@media (min-width: 768px) {
	#mobile-menu {
		display: none !important;
	}
}