/**
 * Design tokens — values captured from the strand.framer.website reference
 * audit (computed styles, 1536px viewport). Swap these for Agent Eclipse's
 * final brand colors/fonts; every component file below reads only from
 * these variables, so a rebrand is a one-file edit.
 */

:root {
	/* ---------- Color: surfaces ---------- */
	--color-bg: #110f0d;
	--color-surface: #1c1917;
	--color-surface-raised: #141210;
	--color-border: #292524;
	--color-border-strong: #3a3532;

	/* ---------- Color: text ---------- */
	--color-text-primary: #fafaf9;
	--color-text-secondary: #a6a09b;
	--color-text-tertiary: #79716b;
	--color-text-quaternary: #57534e;
	--color-text-on-light: #1c1917;

	/* ---------- Color: accents ---------- */
	--color-accent-blue: #2266ff;
	--color-accent-green: #10ec90;
	--color-accent-red: #e5484d;
	--color-accent-red-soft: rgba(229, 72, 77, 0.2);

	/* ---------- Color: controls ---------- */
	--color-button-bg: #f5f5f4;
	--color-button-bg-hover: #d6d3d1;
	--color-button-text: #1c1917;
	--color-button-border: #3a3532;

	/* ---------- Type: families ---------- */
	--font-display: 'Cabinet Grotesk', 'Clash Display', 'Geist', -apple-system, sans-serif;
	--font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', monospace;

	/* ---------- Type: scale (desktop ≥1200px) ---------- */
	--fs-h1: 72px;
	--lh-h1: 64px;
	--ls-h1: -0.03em;

	--fs-h2: 32px;
	--lh-h2: 34px;
	--ls-h2: -0.01em;

	--fs-h3: 18px;
	--lh-h3: 20px;
	--ls-h3: normal;

	--fs-stat: 60px;
	--lh-stat: 1;
	--ls-stat: -0.02em;

	--fs-body: 16px;
	--lh-body: 26px;

	--fs-small: 14px;
	--lh-small: 20px;

	--fs-micro: 12px;
	--lh-micro: 16px;

	/* ---------- Type: scale (tablet/mobile <1024px) ---------- */
	--fs-h1-sm: 48px;
	--lh-h1-sm: 40px;
	--ls-h1-sm: -0.02em;

	--fs-h2-sm: 28px;
	--lh-h2-sm: 30px;

	/* ---------- Radius ---------- */
	--radius-xs: 4px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 9999px;

	/* ---------- Layout ---------- */
	--container-max: 1400px;
	--container-pad: 64px;
	--header-height: 68px;

	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs: 16px;
	--space-sm: 24px;
	--space-md: 32px;
	--space-lg: 48px;
	--space-xl: 64px;
	--space-2xl: 96px;
	--space-section: clamp(96px, 12vw, 220px);

	/* ---------- Motion ---------- */
	--ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 0.2s;
	--duration-base: 0.4s;
	--duration-slow: 0.8s;
	--reveal-distance: 24px;

	/* ---------- Effects ---------- */
	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
	--glow-cta: radial-gradient(60% 60% at 50% 40%, rgba(34, 102, 255, 0.18), transparent 70%);
}

@media (max-width: 1023px) {
	:root {
		--fs-h1: var(--fs-h1-sm);
		--lh-h1: var(--lh-h1-sm);
		--ls-h1: var(--ls-h1-sm);
		--fs-h2: var(--fs-h2-sm);
		--lh-h2: var(--lh-h2-sm);
		--fs-stat: 40px;
		--container-pad: 20px;
		--space-section: clamp(64px, 16vw, 120px);
	}
}