/**
 * Vastus Yachting — base tokens and structural styles.
 * Visual homepage sections are Elementor-owned; this file sets foundations only.
 */

:root {
	/* Measured Task 00 tokens */
	--vy-navy-950: #01263f;
	--vy-navy-800: #1a2941;
	--vy-ink: #10243c;
	--vy-gold-500: #ce972a;
	--vy-gold-400: #da9e2c;
	--vy-gold-600: #d39b29;
	--vy-ocean-600: #0c4f78;
	--vy-wave-mist: #9eb8c8;
	--vy-white: #ffffff;
	--vy-surface-cool: #f8f8f9;
	--vy-text-muted: #657487;
	--vy-border: #dce2e8;

	--vy-color-bg-page: var(--vy-white);
	--vy-color-bg-section: var(--vy-surface-cool);
	--vy-color-bg-footer: var(--vy-navy-950);
	--vy-color-text: var(--vy-ink);
	--vy-color-text-on-dark: var(--vy-white);
	--vy-color-accent: var(--vy-gold-500);
	--vy-color-accent-hover: var(--vy-gold-400);
	--vy-color-border: var(--vy-border);

	--vy-container: 1200px;
	--vy-gutter: 1.5rem;
	--vy-space-1: 0.25rem;
	--vy-section-y: 3rem;
	--vy-footer-stack: 2.5rem;

	--vy-radius-control: 999px;
	--vy-radius-card: 12px;
	--vy-radius-media: 14px;

	--vy-bp-mobile-max: 767px;
	--vy-bp-tablet-min: 768px;
	--vy-bp-desktop-min: 1200px;

	--vy-font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--vy-font-sans: Manrope, "Source Sans 3", system-ui, "Segoe UI", sans-serif;

	--vy-fs-hero: clamp(2.25rem, 4vw, 3.25rem);
	--vy-fs-h2: clamp(1.75rem, 2.5vw, 2.35rem);
	--vy-fs-eyebrow: 0.75rem;
	--vy-fs-body: 1.0625rem;
	--vy-fs-meta: 0.8125rem;
	--vy-fs-button: 0.75rem;
	--vy-tracking-eyebrow: 0.14em;
	--vy-overlay-hero: linear-gradient(90deg, rgba(1, 38, 63, 0.55) 0%, rgba(1, 38, 63, 0.2) 42%, rgba(1, 38, 63, 0) 72%);
	--vy-overlay-booking: linear-gradient(180deg, rgba(1, 38, 63, 0.45) 0%, rgba(1, 38, 63, 0.55) 100%);
}

h1,
h2,
.vy-heading-serif {
	font-family: var(--vy-font-serif);
	font-weight: 600;
	line-height: 1.15;
	color: var(--vy-ink);
}

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	font-family: var(--vy-font-sans);
	color: var(--vy-color-text);
	background: var(--vy-color-bg-page);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: inherit;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--vy-gold-500);
	outline-offset: 3px;
}

.screen-reader-text,
.vy-skip-link:not(:focus) {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.vy-skip-link:focus {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100000;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	padding: 0.75rem 1rem;
	background: var(--vy-navy-950);
	color: var(--vy-white);
	text-decoration: none;
}

.vy-main {
	display: block;
	min-height: 40vh;
}

.vy-entry,
.vy-page {
	margin: 0;
}

/* Breakpoint helpers for later sections (Task 03+) */
@media (max-width: 767px) {
	:root {
		--vy-gutter: 1rem;
		--vy-section-y: 2rem;
	}
}