/* ==========================================================================
   Orbit House — design tokens
   Single source of truth for colour, type, space, radius, shadow and motion.
   Mirrored into theme.json so the block editor offers the same palette.
   ========================================================================== */

:root {
	/* Brand ---------------------------------------------------------------- */
	--ink: #0D0D0D;
	--charcoal: #1A1A1A;
	--gold: #D4AF37;
	--mist: #F4F4F4;
	--white: #FFFFFF;

	/* Derived surfaces & lines --------------------------------------------- */
	--surface-raise: #232323;      /* card on charcoal */
	--line-dark: rgba(255, 255, 255, .12);
	--line-light: rgba(13, 13, 13, .12);
	--gold-soft: rgba(212, 175, 55, .16);
	--gold-line: rgba(212, 175, 55, .38);
	--gold-deep: #7E641D;          /* gold for light surfaces — 5.12:1 on mist, 5.63:1 on white (measured) */

	/* Text ------------------------------------------------------------------ */
	--text-on-dark: #F4F4F4;
	--text-on-dark-muted: rgba(244, 244, 244, .68);  /* 7.9:1 on ink */
	--text-on-light: #0D0D0D;
	--text-on-light-muted: rgba(13, 13, 13, .68);

	/* Type ------------------------------------------------------------------ */
	--font-display: "Syne", "Helvetica Neue", Arial, sans-serif;
	--font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-script: "Parisienne", "Snell Roundhand", cursive;

	/* Micro labels (card tags, CTAs, meta) — 11px was too small to read on a phone. */
	--step--2: clamp(0.75rem, 0.73rem + 0.09vw, 0.82rem);
	--step--1: clamp(0.83rem, 0.80rem + 0.16vw, 0.94rem);
	--step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
	--step-1:  clamp(1.25rem, 1.16rem + 0.44vw, 1.50rem);
	--step-2:  clamp(1.56rem, 1.41rem + 0.75vw, 2.00rem);
	--step-3:  clamp(1.95rem, 1.71rem + 1.22vw, 2.66rem);
	/* Section headings: the 2.44rem floor put five words on five lines at 390px. */
	--step-4:  clamp(2.05rem, 1.55rem + 2.10vw, 3.55rem);
	/* The two display steps start smaller than the scale would suggest: at 375px
	   a 57px headline leaves ~5 characters per line. Desktop sizes unchanged. */
	--step-5:  clamp(2.35rem, 1.75rem + 3.00vw, 4.73rem);
	--step-6:  clamp(2.70rem, 1.60rem + 5.00vw, 7.00rem);   /* hero + big statements */

	/* Space ----------------------------------------------------------------- */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 12px;
	--space-s: 16px;
	--space-m: 24px;
	--space-l: 32px;
	--space-xl: 48px;
	--space-2xl: 64px;
	--space-3xl: 96px;
	--space-4xl: 128px;
	--section-y: clamp(64px, 9vw, 128px);

	/* Layout ---------------------------------------------------------------- */
	--container: 1240px;
	--container-wide: 1560px;
	--container-prose: 68ch;
	--gutter: clamp(20px, 5vw, 56px);
	--header-h: 84px;

	/* Radius & elevation ---------------------------------------------------- */
	--radius-s: 4px;
	--radius-m: 10px;
	--radius-l: 20px;
	--radius-full: 999px;
	--shadow-m: 0 12px 30px rgba(0, 0, 0, .28);
	--shadow-l: 0 30px 80px rgba(0, 0, 0, .45);

	/* Motion ---------------------------------------------------------------- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-micro: 180ms;
	--dur-hover: 320ms;
	--dur-reveal: 620ms;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-micro: 1ms;
		--dur-hover: 1ms;
		--dur-reveal: 1ms;
	}
}