/*
 * Vista Theme — Base variables, reset, typography and buttons
 * Split from the original stylesheet; keep load order intact.
 */

/* ==========================================================================
   01. VARIABLES & RESET
   ========================================================================== */

:root {
	--ink: #18241e;
	--green: #253a30;
	--green-deep: #13221c;
	--green-card: #1c2e26;
	--green-glow: #1f362c;
	--sage: #d6ded2;
	--paper: #fbfaf7;
	--cream: #f4f3ec;
	--cream-dark: #ebe7de;
	--muted: #6b7368;
	--muted-light: #9ba198;
	--gold: #c8a77a;
	--gold-light: #dfc8a5;
	--gold-dark: #9e7f53;
	--white: #ffffff;
	--border: rgba(24, 36, 30, 0.08);
	--border-light: rgba(255, 255, 255, 0.14);
	--serif: "Playfair Display", "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--font-serif: var(--serif);
	--sans: "Plus Jakarta Sans", "Avenir Next", "Segoe UI", -apple-system, sans-serif;
	--container: min(100% - 64px, 1400px);
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--shadow-subtle: 0 10px 30px rgba(19, 34, 28, 0.06);
	--shadow-card: 0 18px 45px rgba(19, 34, 28, 0.09);
	--shadow-float: 0 16px 36px rgba(0, 0, 0, 0.18);
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 86px;
	overflow-x: clip;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

body,
button,
input,
select,
textarea,
a {
	font-family: var(--sans);
}

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

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

.skip-link {
	position: absolute;
	z-index: 99;
	top: 12px;
	left: 12px;
	padding: 10px 18px;
	transform: translateY(-180%);
	background: var(--white);
	color: var(--ink);
	font-weight: 600;
	box-shadow: var(--shadow-subtle);
	transition: transform 0.2s ease;
}

.skip-link:focus {
	transform: translateY(0);
}

.section-wrap {
	width: var(--container);
	margin-right: auto;
	margin-left: auto;
}

/* ==========================================================================
   02. TYPOGRAPHY & BUTTONS
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	font-family: var(--serif);
	font-weight: 400;
	color: inherit;
}

h1 em, h2 em, h3 em {
	font-style: italic;
	font-weight: 400;
	color: var(--gold);
}

.eyebrow {
	display: block;
	margin: 0 0 14px;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	color: var(--gold-dark);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.4;
}

.eyebrow-light {
	color: var(--gold-light);
}

.eyebrow-line {
	display: none;
}

.card-kicker {
	margin: 0 0 8px;
	color: var(--gold-dark);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.section-number {
	font-family: var(--serif);
	font-size: 14px;
	color: var(--muted-light);
	letter-spacing: 0.08em;
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 28px;
	border-radius: var(--radius-sm);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	border: 1px solid transparent;
	transition: all 0.25s ease;
}

.button-gold {
	background: var(--gold);
	color: var(--green-deep);
	border-color: var(--gold);
	box-shadow: 0 8px 24px rgba(200, 167, 122, 0.25);
}

.button-gold:hover {
	background: var(--white);
	color: var(--green-deep);
	border-color: var(--white);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

.button-dark {
	background: var(--green-deep);
	color: var(--white);
	border-color: var(--green-deep);
}

.button-dark:hover {
	background: var(--gold-dark);
	border-color: var(--gold-dark);
	color: var(--white);
	transform: translateY(-2px);
}

.button-light {
	background: var(--white);
	color: var(--green-deep);
	border-color: var(--white);
}

.button-light:hover {
	background: var(--gold);
	color: var(--green-deep);
	border-color: var(--gold);
	transform: translateY(-2px);
}

.button-outline-light {
	background: transparent;
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.35);
}

.button-outline-light:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--white);
	color: var(--white);
	transform: translateY(-2px);
}

.button-outline-dark {
	background: transparent;
	color: var(--green-deep);
	border-color: var(--border-dark);
}

.button-outline-dark:hover {
	background: var(--green-deep);
	color: var(--white);
	border-color: var(--green-deep);
	transform: translateY(-2px);
}

.button-full {
	width: 100%;
}

.text-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	border-bottom: 1px solid rgba(24, 36, 30, 0.3);
	padding-bottom: 2px;
	transition: all 0.2s ease;
}

.text-link:hover {
	color: var(--gold-dark);
	border-color: var(--gold-dark);
}

.text-link-light {
	color: var(--white);
	border-bottom-color: rgba(255, 255, 255, 0.45);
}

.text-link-light:hover {
	color: var(--gold-light);
	border-bottom-color: var(--gold-light);
}