/**
 * MAGMA Event design tokens.
 * Re-authored from the handoff README's "Design tokens (reference)" section —
 * the separate MAGMA Design System project was not part of the handoff bundle,
 * so these are hand-written custom properties, not a copy of that project's files.
 */

:root {
	/* Colour — the fifteen values named in the handoff. */
	--magma-ink: #100C0B;
	--magma-white: #FFFFFF;
	--surface-ground: #F4F4F2;
	--surface-card: #F5F3F0;
	--surface-nav-plate: #F5F5F3;
	--surface-chip: #F3F3F2;
	--border-hairline: #F1F1F1;
	--border-rule: #CCC9C5;
	--text-secondary: #A09F9D;
	--text-caption: #99968F;
	--surface-portrait-placeholder: #EDEBE7;
	--text-on-ink: #EFEEEC;
	--text-on-ink-quiet: rgba(239, 238, 236, 0.76);
	--magma-flame-3: #F95C04;
	--magma-flame-pressed: #BB1E00;

	--wash-up-start: rgba(222, 204, 175, 0);
	--wash-up-end: rgba(219, 217, 212, 0.3);
	--scrim: rgba(16, 12, 11, 0.56);

	/* Typography composites — do not write font shorthands inline. */
	--font-core: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-script: 'Allura', cursive;

	--ls-label: -0.02em;

	/*
	 * Sizes below were measured directly off the handoff's own runnable reference
	 * (design_handoff_conference_landing/Conference Landing (runnable).html) via
	 * getComputedStyle at 375/768/1440px, because the README's "122/80/72" figures
	 * turned out not to match what that file actually renders (72/80px is the real
	 * desktop cap for the two lockup faces) — using the README numbers verbatim
	 * made the hero H1 wrap and overflow into the photo band. Fluid ones are
	 * clamp(floor, Nvw, cap) fitted from those three sample points.
	 */
	--type-eyebrow: 500 14px/16px var(--font-core);
	--type-pair: 500 clamp(19px, 0.744vw, 24px)/24px var(--font-core);
	--type-display: 400 clamp(30px, 5.6vw, 72px)/0.78 var(--font-core);
	--type-script-hero: 400 clamp(30px, 6.2vw, 80px)/0.78 var(--font-script);
	--type-body: 400 14px/20px var(--font-core);
	--type-lead: 400 18px/24px var(--font-core);
	--type-headline: 400 clamp(22px, 1.19vw, 30px)/34px var(--font-core);
	--type-title: 500 clamp(19px, 0.744vw, 24px)/28px var(--font-core);
	--type-title-flat: 400 clamp(19px, 0.744vw, 24px)/24px var(--font-core);
	--type-nav: 500 14px/13px var(--font-core);
	--fs-micro: 11px;
	--fw-regular: 400;
	--font-ui: var(--font-core);

	/* Spacing rhythm — four steps, and nothing between them. */
	--rhythm-section: clamp(72px, 11.3vw, 144px);
	--rhythm-section-close: clamp(48px, 7.5vw, 96px);
	--rhythm-block: clamp(56px, 6vw, 96px);
	--rhythm-row: clamp(40px, 5vw, 64px);
	--rhythm-tight: clamp(24px, 3vw, 36px);

	--layout-rail: clamp(16px, 3.2vw, 28px);
	--layout-band: 1280px;

	--measure-lg: 736px;
	--measure-md: 649px;
	--measure-sm: 418px;
	--measure-xs: 288px;
	--measure-2xs: 240px;

	--gap-signature: 22px;
	--gap-cards: 14px;

	/* Geometry */
	--radius: 12px;
	--rule-weight: 1px;
	--rule-heavy: 3px;
	--shadow-print-sm: 8px 11px 36px rgba(25, 22, 6, 0.11);
	--shadow-print-lg: 8px 24px 40px rgba(25, 22, 6, 0.11);

	/* Motion */
	--ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
	--transition-base: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--motion-marquee-duration: 80s;
}

/* The 680px override for --motion-marquee-duration lives in responsive.css —
   media queries only belong there, see that file's header comment. */