:root {
	--color-blue: #007bff;
	--color-blue-dark: #0052ff;
	--color-navy: #0d192e;
	--color-cyan: #00e5ff;
	--color-white: #ffffff;
	--color-black: #0c0c0c;
	--color-grey-50: #fafbfc;
	--color-grey-100: #8f8f8f;
	--color-grey-200: #5c5c5c;
	--color-grey-300: #dce3eb;
	--color-grey-400: #b4b4b4;
	--color-grey-500: #9097a0;
	--color-grey-600: #69787d;
	--color-grey-border: #cbd5e1;
	--color-blue-light: #e6f2ff;
	--color-illus-blue: #b0d6ff;
	--color-blue-light-50: rgba(230, 242, 255, 0.5);
	--color-code-dark: #0d171a;
	--color-code-blue: #0052ff;
	--color-code-green: #059669;

	--font-heading: "Helvetica Neue", "HelveticaNeue", Helvetica, Arial, sans-serif;
	--font-body: "Inter", sans-serif;
	--font-mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;

	--container-width: 1240px;
	--page-padding: 100px;
	--page-padding-mobile: 24px;
	--container-gutter: var(--page-padding);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-xl: 24px;
	--radius-pill: 100px;
	--radius-footer: 80px;

	--shadow-accent: 0 8px 12px rgba(176, 214, 255, 0.5);
	--shadow-card: 0 1px 0 rgba(203, 213, 225, 0.5);

	--header-height: 103px;
	--header-height-mobile: 72px;

	--transition: 0.2s ease;
}