/**
 * Design tokens — single source of truth for colour, type, spacing, and
 * radius. Every other stylesheet in this theme reads these custom
 * properties instead of hard-coding values. Change the brand here, and
 * only here.
 *
 * Spacing scale is not part of the brand brief — it's a 4px-based scale
 * chosen to give the passport/boarding-pass layouts consistent rhythm.
 */
:root {
	/* Colour — blue leads (sampled from the logo mark), gold is a
	   restrained accent, ink is the darkest anchor for full-bleed dark
	   sections. See assets/images/logo/logo MG GLOBAL.png — the sampled
	   core pixel is #0B4488 (H213° S85% L29%), distinct enough from
	   --color-ink (L9%) to earn its own role rather than collapsing into it. */
	--color-ink: #0E1A2B;
	--color-blue: #0B4488; /* sampled logo blue — primary buttons, links, active states, focus rings */
	--color-blue-deep: #063368; /* same hue, ~25% lower lightness — hover/active on blue */
	--color-blue-tint: #E7EFF9; /* same hue, ~94% lightness — soft section backgrounds, icon fills */
	--color-gold: #C9A961;
	--color-gold-soft: #E4D3A8;
	--color-cream: #FAF7F2;
	--color-mist: #6B6E68; /* darkened from the original #93968F (2.97:1 on cream, failed WCAG AA) — 5.18:1 on white / 4.85:1 on cream, both pass AA for normal text */
	--color-charcoal: #1B1E24;
	--color-line: rgba(14, 26, 43, 0.14);
	--color-ok: #2E7D5B;
	--color-error: #8C2F2F; /* the design system defines --ok for success but nothing for the opposite; deep oxblood keeps the "restrained, not clinical" feel instead of a stock bright red */
	--color-white: #FFFFFF; /* the login card is explicitly "white" against the cream page background — the only place these two need to read as visually distinct */
	--color-cream-rgb: 250, 247, 242; /* lets rgba(var(--color-cream-rgb), alpha) reference --color-cream at partial opacity */
	--color-ink-rgb: 14, 26, 43; /* same technique for --color-ink, e.g. the lightbox overlay */
	--color-blue-rgb: 11, 68, 136;
	--color-gold-rgb: 201, 169, 97;
	--color-ok-rgb: 46, 125, 91;
	--color-error-rgb: 140, 47, 47;
	--color-charcoal-rgb: 27, 30, 36;
	--color-viewer-bg: #000000; /* pure black — not a brand colour, specific to the full-screen story viewer's Instagram/WhatsApp-style presentation */
	--color-viewer-bg-rgb: 0, 0, 0;

	/* Font families */
	--font-display: 'Fraunces', serif;
	--font-body: 'Inter', sans-serif;
	--font-mono: 'IBM Plex Mono', monospace;

	/* Font weights — only the weights actually loaded in functions.php */
	--weight-display-regular: 400;
	--weight-display-medium: 500;
	--weight-body-regular: 400;
	--weight-body-medium: 500;
	--weight-body-semibold: 600;
	--weight-mono-regular: 400;
	--weight-mono-medium: 500;

	/* Type scale (rem, 1rem = 16px browser default) */
	--text-xs: 0.6875rem; /* 11px — this IS the utility-label size (eyebrows, mono data); corrected from 12px to match the type spec exactly */
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.375rem;
	--text-xl: 1.75rem;
	--text-2xl: 2.25rem;
	--text-3xl: 2.75rem;
	--text-4xl: 3.5rem;

	/* Marketing-surface scale — hero headline, section headings, and card
	   titles specifically (see base.css/components.css/front-page.css for
	   where each is applied). Deliberately separate from the --text-*
	   scale above, which stays as the generic UI/content-page fallback. */
	--text-display: clamp(2.625rem, 5.6vw, 4.875rem); /* 42px – 78px, hero h1 */
	--text-section-heading: clamp(1.875rem, 3.6vw, 2.875rem); /* 30px – 46px, h2 */
	--text-card-heading: 1.3125rem; /* 21px, h3 */
	--text-body: 1.03125rem; /* 16.5px */

	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-normal: 1.6;
	--leading-relaxed: 1.75; /* long-form article body copy — more generous than UI text */
	--leading-display: 0.96;
	--leading-section-heading: 1.06;
	--leading-card-heading: 1.22;
	--leading-body: 1.68;
	--leading-body-sm: 1.62;

	--tracking-label: 0.14em;
	--tracking-display: -0.022em;
	--tracking-section-heading: -0.016em;
	--tracking-card-heading: -0.008em;
	--tracking-body: -0.003em;

	/* Spacing scale (px, 4px base unit) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* Radius — design system caps this at 2-8px. --radius-tag is the one
	   documented exception, reserved for small pill-shaped tags only. */
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--radius-tag: 999px;

	/* Borders */
	--border-hairline: 1px solid var(--color-line);
	--border-hairline-dashed: 1px dashed var(--color-line);

	/* Layout */
	--container-max: 1180px;
	--container-padding: var(--space-6); /* 32px desktop — narrowed to var(--space-5) (24px) under 640px, see base.css */

	/* Chrome: the fixed nav's own height and blur amount */
	--nav-height: 74px;
	--backdrop-blur: 12px;
	--announcement-bar-height: 44px;

	/* Motion — one easing curve, one duration scale, used everywhere.
	   Never mix a different curve or a bespoke duration into a one-off
	   transition; add the interaction to this scale instead. */
	--ease: cubic-bezier(0.16, 0.84, 0.36, 1);
	--t-fast: 0.18s;
	--t-base: 0.32s;
	--t-slow: 0.6s;

	/* Elevation — each tier layers a tight contact shadow with a soft
	   ambient one, tinted with --color-ink-rgb (the site's darkest blue)
	   rather than neutral grey, so depth reads as part of the same
	   colour system instead of a generic drop-shadow bolted on top. */
	--shadow-sm: 0 1px 2px rgba(14, 26, 43, 0.04), 0 2px 6px rgba(14, 26, 43, 0.04);
	--shadow-md: 0 2px 4px rgba(14, 26, 43, 0.04), 0 8px 24px rgba(14, 26, 43, 0.07);
	--shadow-lg: 0 4px 8px rgba(14, 26, 43, 0.05), 0 20px 48px rgba(14, 26, 43, 0.10);
	--shadow-xl: 0 8px 16px rgba(14, 26, 43, 0.06), 0 32px 72px rgba(14, 26, 43, 0.14);
}