/*
 * Viniijewels design tokens — from the approved homepage design (02-design/viniijewelshomepage.html).
 * Contrast fixes vs. the design file (WCAG AA, measured):
 *   --ink-subtle  #8C7565 → #76604F  (was 3.4–3.9:1; now 4.6:1 on oat, 5.35:1 on pearl)
 *   --gold-ink    new #876838 for gold TEXT (numerals); --gold stays for rules, stars, borders only.
 */

@font-face {
	font-family: "Instrument Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Instrument Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/instrument-serif-italic-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Archivo";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/archivo-var-latin.woff2") format("woff2");
}

:root {
	/* Surfaces */
	--oat: #f2e0d2;
	--pearl: #faf2ef;
	--peony: #ffe6ec;
	--espresso: #33231c;
	--espresso-2: #241a18;

	/* Ink */
	--ink: #241a18;          /* 15.4:1 on pearl */
	--ink-muted: #6e5748;    /* 6.1:1 on pearl, 5.25:1 on oat */
	--ink-subtle: #76604f;   /* 5.35:1 on pearl, 4.6:1 on oat, 5.0:1 on peony */

	/* Accents */
	--emerald: #14513c;      /* prepaid price — 8.4:1 on pearl */
	--gold: #b08d57;         /* decorative only on light bg; 4.86:1 on espresso */
	--gold-ink: #876838;     /* gold text on light bg — 4.67:1 on pearl */
	--gold-lite: #d9bc8c;    /* 8.2:1 on espresso */
	--line: #e5d3c4;
	--line-peony: #f3d2da;

	/* Type */
	--display: "Instrument Serif", Georgia, "Times New Roman", serif;
	--ui: "Archivo", "Helvetica Neue", Arial, sans-serif;

	/* Space — 4px base */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;

	/* Layout */
	--gutter: 20px;
	--sec: 64px;

	/* Elevation */
	--lift: 0 26px 44px -26px rgba(51, 35, 28, 0.55);

	--ease-out: cubic-bezier(0.16, 0.68, 0.28, 1);
}

@media (min-width: 900px) {
	:root { --gutter: 52px; --sec: 110px; }
}
@media (min-width: 1360px) {
	:root { --gutter: 88px; --sec: 132px; }
}
@media (min-width: 1700px) {
	:root { --gutter: clamp(88px, 7vw, 190px); --sec: 150px; }
}