/* ============================================================================
 * DS2+ Extensions — 1-tokens.css
 *
 * Display scale (typography), motion (easing + durations), section rhythm,
 * shadows. All additive to :root. Dark-mode overrides via [data-theme="dark"]
 * where the value meaningfully differs between light and dark.
 *
 * Consumed by 2-layout.css, 3-primitives.css, 4-motion.css. Must be loaded
 * FIRST among the extensions.
 * ==========================================================================*/

:root {
	/* === Typography — display scale ===
     Clamp ranges tuned from the Stripe audit: 32-44px / 40-56 / 48-72 / 56-96.
     Weight 700 applied on the utility classes below, not via token. */
	--display-sm: clamp(2rem, 4vw + 1rem, 2.75rem);
	--display-md: clamp(2.5rem, 5vw + 1rem, 3.5rem);
	--display-lg: clamp(3rem, 6vw + 1rem, 4.5rem);
	--display-xl: clamp(3.5rem, 8vw + 1rem, 6rem);

	--tracking-tight: -0.02em;
	--tracking-tighter: -0.025em;
	--lh-display: 1.08;
	--lh-tight-plus: 1.12;

	/* === Motion ===
     Only what's consumed elsewhere in this spec. Expand if a future
     sub-project needs additional easings/durations. */
	--easing-smooth: cubic-bezier(0.25, 1, 0.5, 1);
	--duration-base: 220ms;
	--duration-slow: 300ms;
	--transition-smooth: var(--duration-base) var(--easing-smooth);

	/* === Section rhythm — consumed by 2-layout.css variants === */
	--section-padding-y-sm: clamp(2.5rem, 6vw, 4rem);
	--section-padding-y-base: clamp(4rem, 8vw, 6rem);
	--section-padding-y-lg: clamp(5rem, 10vw, 8rem);

	/* === Shadow extensions === */
	--shadow-hover:
		0 10px 32px rgba(20, 28, 82, 0.12), 0 2px 8px rgba(20, 28, 82, 0.08);
	--shadow-focus-ring: 0 0 0 3px rgba(20, 28, 82, 0.18);

	/* === Sensitive rgba values consumed by 4-motion.css ===
     Extracted here so dark-mode override centralised. */
	--hover-glow-ring: rgba(20, 28, 82, 0.15);
	--shimmer-stop: rgba(20, 28, 82, 0.06);
}

/* Dark mode — navy shadows vanish on navy background; switch to white rgba. */
[data-theme="dark"] {
	--shadow-hover:
		0 10px 32px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(255, 255, 255, 0.04);
	--shadow-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.28);
	--hover-glow-ring: rgba(255, 255, 255, 0.2);
	--shimmer-stop: rgba(255, 255, 255, 0.08);
}

/* === Utility classes — display scale ===
   font-weight forced to 700 so the render is identical whether applied on
   <h1/2/3> or on <div/span>. */
.display-sm {
	font-size: var(--display-sm);
	line-height: var(--lh-tight-plus);
	letter-spacing: var(--tracking-tight);
	font-weight: var(--fw-bold);
}
.display-md {
	font-size: var(--display-md);
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-tight);
	font-weight: var(--fw-bold);
}
.display-lg {
	font-size: var(--display-lg);
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-tighter);
	font-weight: var(--fw-bold);
}
.display-xl {
	font-size: var(--display-xl);
	line-height: var(--lh-display);
	letter-spacing: var(--tracking-tighter);
	font-weight: var(--fw-bold);
}