/**
 * Metalumina Flagship — Design Tokens
 *
 * The single source of truth for the visual language. Nothing downstream
 * hard-codes a colour, a radius, a border or a shadow: it reads from here.
 * That is what the brief means by "ONE consistent style for icons, glow,
 * borders and spacing".
 */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/inter/Inter-Variable.woff2') format('woff2-variations');
	/* Latin + punctuation + arrows + the Greek pi used in phase labels. */
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
		U+02DA, U+02DC, U+0304, U+0308, U+0329, U+03C0, U+2000-206F, U+2074,
		U+20AC, U+2122, U+2191-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* ── Surface scale ────────────────────────────────────────────────
	   Deep navy rather than black. Each step is a deliberate ~2% lift so
	   adjacent sections separate without a visible seam. */
	--ml-void: #04070E;
	--ml-bg: #070B14;
	--ml-bg-raised: #0A0F1C;
	--ml-bg-sunken: #05080F;
	--ml-surface: #0B1120;
	--ml-surface-hi: #101827;

	/* ── Ink ──────────────────────────────────────────────────────────
	   The brief is explicit: reduce brightness, avoid pure white. The
	   brightest ink on the site is #E6ECF7 and it is reserved for display
	   headings only. */
	--ml-ink-display: #E6ECF7;
	--ml-ink: #C6D0E2;
	--ml-ink-muted: #8593AC;
	--ml-ink-faint: #5B6880;
	--ml-ink-ghost: #3E495D;

	/* ── Accent ───────────────────────────────────────────────────────
	   One accent family. No secondary hues anywhere in the chrome; the
	   status tags on Current Stage are the single sanctioned exception
	   and they are desaturated to sit inside the same world. */
	--ml-accent: #4C8DFF;
	--ml-accent-soft: #7FADFF;
	--ml-accent-deep: #2563EB;
	--ml-accent-dim: rgba(76, 141, 255, 0.55);

	--ml-status-active: #6E8BFF;
	--ml-status-validate: #C9A227;
	--ml-status-explore: #3FA88E;

	/* ── Lines ────────────────────────────────────────────────────────
	   Exactly three border weights exist. Nothing else. */
	--ml-line: rgba(139, 168, 214, 0.10);
	--ml-line-hi: rgba(139, 168, 214, 0.18);
	--ml-line-accent: rgba(76, 141, 255, 0.32);

	/* ── Glow ─────────────────────────────────────────────────────────
	   One glow recipe, three intensities. Used for hover states and for
	   the optical highlights inside the diagrams — never as page texture. */
	--ml-glow-sm: 0 0 24px rgba(76, 141, 255, 0.10);
	--ml-glow-md: 0 0 48px rgba(76, 141, 255, 0.14);
	--ml-glow-lg: 0 0 96px rgba(76, 141, 255, 0.16);
	--ml-lift: 0 24px 60px -32px rgba(2, 5, 12, 0.9);

	/* ── Radii ────────────────────────────────────────────────────────*/
	--ml-r-sm: 4px;
	--ml-r-md: 8px;
	--ml-r-lg: 14px;
	--ml-r-pill: 999px;

	/* ── Type ─────────────────────────────────────────────────────────*/
	--ml-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;
	--ml-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono',
		Menlo, Consolas, monospace;

	/* Fluid display scale. Tight tracking at the large end, loosened at the
	   small end — optical correction, not decoration. */
	--ml-t-display: clamp(2.6rem, 1.35rem + 4.6vw, 5.25rem);
	--ml-t-h1: clamp(2.25rem, 1.3rem + 3.4vw, 4rem);
	--ml-t-h2: clamp(1.85rem, 1.25rem + 2.1vw, 3rem);
	--ml-t-h3: clamp(1.3rem, 1.08rem + 0.78vw, 1.75rem);
	--ml-t-h4: clamp(1.08rem, 1rem + 0.32vw, 1.25rem);
	--ml-t-lead: clamp(1.05rem, 0.97rem + 0.34vw, 1.28rem);
	--ml-t-body: 1rem;
	--ml-t-sm: 0.9375rem;
	--ml-t-xs: 0.8125rem;
	--ml-t-eyebrow: 0.75rem;

	--ml-track-display: -0.032em;
	--ml-track-h: -0.022em;
	--ml-track-body: -0.006em;
	--ml-track-eyebrow: 0.18em;

	--ml-lh-display: 1.04;
	--ml-lh-h: 1.14;
	--ml-lh-body: 1.68;

	/* ── Space ────────────────────────────────────────────────────────
	   The brief asks for materially more air between sections than the
	   previous build had. --ml-section is the governing rhythm. */
	--ml-s-1: 4px;
	--ml-s-2: 8px;
	--ml-s-3: 12px;
	--ml-s-4: 16px;
	--ml-s-5: 24px;
	--ml-s-6: 32px;
	--ml-s-7: 48px;
	--ml-s-8: 64px;
	--ml-s-9: 88px;
	--ml-s-10: 120px;

	--ml-section: clamp(6rem, 3.2rem + 8.5vw, 11.5rem);
	--ml-section-tight: clamp(4.5rem, 2.8rem + 5.4vw, 8rem);
	--ml-gutter: clamp(1.25rem, 0.55rem + 2.6vw, 3rem);

	/* ── Measure ──────────────────────────────────────────────────────*/
	--ml-w-full: 1440px;
	--ml-w-wide: 1240px;
	--ml-w-content: 1080px;
	--ml-w-text: 720px;
	--ml-w-narrow: 640px;

	/* ── Motion ───────────────────────────────────────────────────────
	   Cinematic means slow and confident. Nothing on this site uses a
	   bounce or an elastic curve. */
	--ml-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ml-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ml-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--ml-d-fast: 180ms;
	--ml-d-base: 320ms;
	--ml-d-slow: 620ms;
	--ml-d-reveal: 900ms;

	--ml-header-h: 68px;
	--ml-z-header: 100;
	--ml-z-overlay: 200;
	--ml-z-skip: 300;
}

@media (max-width: 900px) {
	:root {
		--ml-header-h: 60px;
	}
}