/* =========================================================================
   Design tokens (CSS custom properties)
   Font: Inter. Accent: #0259FF. Dark: #06162F.
   ========================================================================= */
:root {
	/* Brand */
	--blue: #0259ff;
	--blue-hover: #0247d6;
	--blue-press: #0139ad;
	--navy: #06162f; /* footer, dark mockup, deep text */

	/* Text */
	--ink: #0b0c0c; /* headings */
	--ink-2: #1c2433; /* strong body */
	--text: #4a5568; /* body */
	--text-muted: #7a8699; /* captions, meta */

	/* Surfaces */
	--white: #ffffff;
	--bg: #f5f8ff; /* page tint */
	--surface: #f7f8fa; /* section alt */
	--surface-2: #f4f6fa;
	--tint: #eef3ff; /* blue tint chips */
	--tint-2: #f5f8ff;

	/* Semantic */
	--green: #16a34a;
	--red: #dc2626;
	--amber: #d97706;

	/* Lines & shadows */
	--border: #e6ebf3;
	--border-soft: #eef1f6;
	--shadow-sm: 0 1px 2px rgba(6, 22, 47, 0.05), 0 1px 3px rgba(6, 22, 47, 0.04);
	--shadow-md:
		0 4px 12px rgba(6, 22, 47, 0.06), 0 2px 4px rgba(6, 22, 47, 0.04);
	--shadow-lg:
		0 20px 40px -12px rgba(6, 22, 47, 0.16),
		0 8px 16px -8px rgba(6, 22, 47, 0.08);
	--shadow-mock:
		0 30px 60px -20px rgba(6, 22, 47, 0.28),
		0 12px 24px -12px rgba(6, 22, 47, 0.16);

	/* Geometry */
	--r-sm: 8px;
	--r: 12px;
	--r-lg: 16px;
	--r-xl: 20px;
	--r-pill: 999px;

	/* Layout */
	--maxw: 1920px;
	--gutter: clamp(20px, 6.25vw, 120px);

	/* Type */
	--font:
		"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
		Arial, sans-serif;

	/* Motion */
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}