/*
 * Morgen design tokens.
 * Source: freelancer Homepage export (Figma, 1440px). Design System v2.0 files were not available;
 * replace values here if the DS tokens arrive. Do not hard-code these values in components.
 *
 * Font: design uses SF Pro Display (Apple-only licence, cannot be web-embedded).
 * Inter (variable, with optical sizing) is self-hosted as the web substitute — pending freelancer confirmation.
 * Figma weight 274 (SF "light") maps to 300.
 */
:root {
	/* Colour: canvas */
	--mg-navy-950: #081128;
	--mg-navy-900: #0d1a42;
	--mg-navy-800: #24325b;
	--mg-navy-700: #233141;
	--mg-cream: #f4efe8;
	--mg-offwhite: #fafafa;
	--mg-white: #ffffff;

	/* Colour: light (brand) */
	--mg-blue-500: #28aae1;
	--mg-blue-700: #157ec2;
	--mg-blue-tint: rgba(40, 170, 225, 0.1);

	/* Colour: warmth (italic accents) */
	--mg-bronze: #7a5d38;   /* accent on light backgrounds */
	--mg-gold: #d4b690;     /* accent on navy backgrounds */

	/* Colour: text & lines */
	--mg-ink: #242424;
	--mg-ink-2: #5b6170;
	--mg-ink-3: #8d8e8f;
	--mg-on-dark: #f2f2f2;
	--mg-on-dark-2: #aab1c6;
	--mg-on-dark-3: #8c97b0;
	--mg-line: #d8d5d4;
	--mg-line-2: #e2e3e8;
	--mg-line-dark: rgba(250, 250, 250, 0.2);

	--mg-whatsapp: #00c23a;
	--mg-cream-2: #faf7f2;
	--mg-header-h: 99px;

	/* Typography */
	--mg-font: "Inter Morgen", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--mg-fw-light: 300;
	--mg-fw-regular: 400;
	--mg-fw-medium: 500;
	--mg-fw-bold: 700;

	/* Fluid sizes: mobile 390px → desktop 1440px */
	--mg-fs-display: clamp(2.75rem, 1.6rem + 4.7vw, 5.75rem);   /* 44 → 92 hero */
	--mg-fs-h1: clamp(2.5rem, 1.75rem + 3vw, 4.4375rem);        /* 40 → 71 about */
	--mg-fs-h2: clamp(2rem, 1.45rem + 2.25vw, 3.375rem);        /* 32 → 54 section */
	--mg-fs-h3: clamp(1.75rem, 1.5rem + 1vw, 3rem);             /* 28 → 48 */
	--mg-fs-stat: clamp(2.25rem, 1.75rem + 2vw, 3.625rem);      /* 36 → 58 */
	--mg-fs-xl: 1.75rem;   /* 28 card title */
	--mg-fs-lg: 1.25rem;   /* 20 lead, list */
	--mg-fs-md: 1.125rem;  /* 18 card name */
	--mg-fs-base: 1rem;    /* 16 */
	--mg-fs-sm: 0.875rem;  /* 14 body small, nav */
	--mg-fs-xs: 0.75rem;   /* 12 eyebrow, meta */
	--mg-fs-2xs: 0.625rem; /* 10 chip */

	--mg-lh-tight: 1.02;
	--mg-lh-heading: 1.18;
	--mg-lh-body: 1.4;
	--mg-lh-relaxed: 1.8;

	--mg-ls-tight: -0.03em;
	--mg-ls-snug: -0.01em;
	--mg-ls-wide: 0.04em;
	--mg-ls-caps: 0.08em;

	/* Space (4px base) */
	--mg-space-1: 0.25rem;
	--mg-space-2: 0.5rem;
	--mg-space-3: 0.75rem;
	--mg-space-4: 1rem;
	--mg-space-5: 1.5rem;
	--mg-space-6: 2rem;
	--mg-space-7: 3rem;
	--mg-space-8: 4rem;
	--mg-space-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);

	/* Layout */
	--mg-container: 78.25rem;                 /* 1252px */
	--mg-gutter: clamp(1rem, -0.5rem + 6vw, 5.875rem); /* 16 → 94px */

	/* Radius */
	--mg-radius-xs: 4px;
	--mg-radius-sm: 8px;
	--mg-radius-md: 12px;
	--mg-radius-lg: 20px;
	--mg-radius-xl: 30px;
	--mg-radius-pill: 999px;

	/* Motion */
	--mg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--mg-dur: 200ms;

	/* Breakpoints (reference only; CSS vars cannot be used in media queries)
	   sm 600 · md 768 · lg 1024 · xl 1280 · design 1440 */
}