/* =========================================================================
   VibeModa — design tokens, reset and typography
   ========================================================================= */

:root {
	/* Surfaces */
	--paper: #ffffff;
	--canvas: #fbf9f6;
	--sand: #f4f0ea;
	--sand-2: #ece5db;
	--ink-surface: #16130f;

	/* Ink */
	--ink: #14110f;
	--ink-2: #3d3630;
	--muted: #7b726a;
	--muted-2: #a29a92;

	/* Lines */
	--line: #e8e1d8;
	--line-2: #d8cfc3;

	/* Accents */
	--gold: #9d7729;
	--gold-2: #c9a45c;
	--gold-wash: #faf4e8;
	--sale: #a3231f;
	--sale-wash: #fbeceb;
	--green: #2c6b4f;

	/* Radii */
	--r-xs: 6px;
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--r-xl: 32px;
	--r-pill: 999px;

	/* Shadows */
	--sh-1: 0 1px 2px rgba(20, 17, 15, .04), 0 2px 8px rgba(20, 17, 15, .04);
	--sh-2: 0 2px 6px rgba(20, 17, 15, .05), 0 12px 28px rgba(20, 17, 15, .07);
	--sh-3: 0 8px 20px rgba(20, 17, 15, .08), 0 30px 60px rgba(20, 17, 15, .12);
	--sh-gold: 0 10px 30px rgba(157, 119, 41, .18);

	/* Motion */
	--ease: cubic-bezier(.22, .68, .3, 1);
	--t-fast: .16s var(--ease);
	--t: .28s var(--ease);
	--t-slow: .5s var(--ease);

	/* Layout */
	--wrap: 1280px;
	--gut: 20px;
	--header-h: 68px;

	/* Type */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Playfair Display", Georgia, "Times New Roman", serif;
}

@media (min-width: 768px) {
	:root { --gut: 32px; --header-h: 76px; }
}

@media (min-width: 1280px) {
	:root { --gut: 40px; }
}

/* ---------- reset ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
	margin: 0;
	background: var(--canvas);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.vm-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

del { text-decoration: none; }

::selection { background: var(--gold-2); color: #fff; }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- typography scale ---------- */

.vm-display {
	font-family: var(--font-display);
	font-weight: 400;
	letter-spacing: -.02em;
	line-height: 1.05;
}

.vm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 14px;
}

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

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.vm-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	background: var(--ink);
	color: #fff;
	padding: 12px 20px;
	border-radius: 0 0 var(--r-sm) 0;
}
.vm-skip:focus { left: 0; }

/* ---------- prose (CMS content) ---------- */

.vm-prose { font-size: 17px; line-height: 1.75; color: var(--ink-2); }
.vm-prose > * + * { margin-top: 1.1em; }
.vm-prose h2 { font-size: clamp(22px, 3vw, 28px); color: var(--ink); margin-top: 1.8em; }
.vm-prose h3 { font-size: clamp(18px, 2.4vw, 21px); color: var(--ink); margin-top: 1.6em; }
.vm-prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.vm-prose ul, .vm-prose ol { padding-left: 1.2em; }
.vm-prose ul { list-style: none; }
.vm-prose ul li { position: relative; padding-left: 4px; }
.vm-prose ul li::before {
	content: "";
	position: absolute;
	left: -14px; top: .7em;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--gold-2);
}
.vm-prose ol { list-style: decimal; }
.vm-prose li + li { margin-top: .5em; }
.vm-prose strong { color: var(--ink); font-weight: 600; }
.vm-prose img { border-radius: var(--r-md); }

/* ---------- utility ---------- */

.vm-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.vm-icon { flex: none; }

.vm-hide-sm { display: none; }
@media (min-width: 768px) { .vm-hide-sm { display: inline-flex; } }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}