/* ============================================================
   Maguska — design tokens  ("Ink & Mist")
   ============================================================ */

:root {
	/* Palette — "Ink & Mist" (deep navy + cool light greys, minimal) */
	--ink: #17244C;            /* deep navy — text, headings, dark bands, buttons */
	--blue: #33529C;          /* medium blue — links, accents, small marks */
	--blue-soft: #7E8DBE;     /* periwinkle — secondary accents / eyebrows */
	--gold: #33529C;           /* (legacy name) accent blue — bars, prices, borders */
	--gold-soft: #A9B8DE;      /* light periwinkle — accents on dark bands */
	--gold-deep: #24407D;      /* deep blue — pressed / hover */
	--sand: #EAEDF4;           /* light cool-grey band */
	--paper: #F5F6FA;          /* page background (light cool grey) */
	--white: #FFFFFF;          /* cards */

	/* Roles */
	--bg: var(--paper);
	--text: var(--ink);
	--muted: #5C6579;              /* slate for secondary text */
	--muted-on-ink: rgba(255, 255, 255, .75);
	--hairline: #E1E5EE;           /* soft cool hairline */
	--hairline-on-ink: rgba(255, 255, 255, .14);
	--link: var(--blue);
	--link-hover: var(--ink);

	/* Type families */
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Fluid type scale (~1.25) */
	--fs-display: clamp(2.5rem, 1.45rem + 4.6vw, 3.8rem);
	--fs-h1: clamp(2.05rem, 1.5rem + 2.5vw, 2.75rem);
	--fs-h2: clamp(1.62rem, 1.28rem + 1.6vw, 2.1rem);
	--fs-h3: 1.5rem;
	--fs-h4: 1.2rem;
	--fs-body: 1.0625rem;
	--fs-small: 0.85rem;
	--lh-body: 1.62;
	--lh-tight: 1.12;

	/* Spacing */
	--space-2xs: 0.375rem;
	--space-xs: 0.625rem;
	--space-sm: 0.875rem;
	--space-md: 1.25rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4.5rem;
	--section-y: clamp(3.25rem, 2rem + 5vw, 6rem);

	/* Radii, borders, shadow (one real shadow, reserved) */
	--radius-img: 12px;
	--radius-card: 14px;
	--radius-lg: 22px;
	--radius-btn: 6px;
	--radius-pill: 999px;
	--shadow-float: 0 18px 44px -16px rgba(23, 36, 76, .22);

	/* Containers */
	--container: 1240px;
	--container-narrow: 44rem;
	--header-h: 68px;
}