/* ==========================================================================
   MSA&Co — design tokens.
   ========================================================================== */
:root {
	/* Palette (sampled from the logo, contrast verified) */
	--c-abyss: #05041a;
	--c-midnight: #0c0a2a;
	--c-indigo: #1b1545;
	--c-gold: #c9a96a;        /* lines, icons, buttons on dark — never text on light */
	--c-gold-light: #e4c984;  /* accent text and hover on dark */
	--c-gold-deep: #7d5f27;   /* gold for text on light (5.4:1) */
	--c-porcelain: #f4f3f8;
	--c-white: #ffffff;
	--c-ink: #14122e;
	--c-slate: #5a5773;
	--c-mist: #b8b5cc;

	/* Hairlines */
	--line-light: rgb(20 18 46 / 0.14);
	--line-dark: rgb(244 243 248 / 0.14);
	--line-gold: var(--c-gold);

	/* Typography */
	--font-display: "Playfair Display", Georgia, "Times New Roman", serif; /* @font-face size-adjust 86% (theme.json): wider than a Garamond */
	--font-text: Manrope, "Segoe UI", system-ui, -apple-system, sans-serif;

	--fs-small: 0.9375rem;                                   /* 15 */
	--fs-xs: 0.875rem;                                       /* 14 */
	--fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);     /* 17 → 18 */
	--fs-lead: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem); /* 19 → 22 */
	--fs-h1: clamp(2.75rem, 1.6rem + 4.2vw, 6rem);           /* 44 → 96 */
	--fs-h2: clamp(2.25rem, 1.4rem + 2.8vw, 4rem);           /* 36 → 64 */
	--fs-h3: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);            /* 24 → 32 */
	--fs-h4: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);         /* 20 → 24 */

	--lh-text: 1.6;
	--lh-heading: 1.08;
	--measure: 68ch;

	/* Spacing (8px scale) */
	--s-1: 0.5rem;
	--s-2: 1rem;
	--s-3: 1.5rem;
	--s-4: 2rem;
	--s-5: 2.5rem;
	--s-6: 3rem;
	--s-8: 4rem;
	--s-10: 5rem;
	--s-12: 6rem;
	--section-y: clamp(4rem, 1.5rem + 7.5vw, 10rem);         /* 64 → 160 */
	--section-y-tight: clamp(3rem, 1.5rem + 4vw, 6rem);

	/* Grid */
	--container: 1600px;
	--gutter: 20px;           /* outer side margin, <768 */
	--gap: 24px;              /* column gap */
	--header-h: 72px;
	--header-h-compact: 64px;

	/* Shape & motion */
	--radius: 2px;
	--radius-field: 3px;
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--dur: 200ms;

	/* Focus ring (overridden per tone) */
	--focus: var(--c-gold-deep);
}

@media (min-width: 768px) {
	:root { --gutter: 32px; --gap: 24px; }
}
@media (min-width: 1024px) {
	:root { --gutter: 48px; --gap: 32px; --header-h: 88px; --header-h-compact: 72px; }
}
@media (min-width: 1440px) {
	:root { --gutter: 80px; }
}