/** @format */

/* Color Palette */
:root {
	--rich-black: #010b13;         /* Deep vault black */
	--soft-black: #1a1a1a;         /* Secondary containers */
	--gold: #ffd700;               /* Highlight gold */
	--burnt-orange: #ff8c00;       /* Action/orange pop */
	--dark-wood: #3b2f2f;          /* Balcony/floor visuals */
	--text-gray: #e6e6e6;          /* Readable text on dark */
	--metal: #444444;              /* Vault door detailing */
}

/* Global Reset */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style-type: none;
	/* outline: 1px red dotted; */ /* Uncomment for debugging layout */
}

body {
	font-family: "Garamond", "Times New Roman", serif;
	background-color: var(--rich-black);
	color: var(--text-gray);
}

/* Remove underlines, inherit color */
a {
	color: inherit;
	text-decoration: none;
}

/* Header */
header {
	background-color: var(--rich-black);
	color: var(--text-gray);
	padding: 20px 50px 10px;
}

/* Navigation */
.navbar {
	display: flex;
	gap: 44px;
	font-size: 20px;
	color: var(--text-gray);
}

.homebar {
	margin-right: auto;
}

/* Main Content */
main {
	background-color: var(--rich-black);
	color: var(--text-gray);
}

/* Footer */
footer {
	background-color: var(--rich-black);
	color: var(--text-gray);
}

.copyright {
	display: flex;
	justify-content: center;
}

/* Button Example */
.button {
	background-color: var(--burnt-orange);
	color: var(--rich-black);
	padding: 10px 20px;
	border: none;
	border-radius: 4px;
	transition: background-color 0.3s;
}

.button:hover {
	background-color: var(--gold);
	cursor: pointer;
}

/* Utility (if you want to simulate wood or metal later) */
.wood-bg {
	background-color: var(--dark-wood);
}

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