:root {
	/* Brand */
	--sflow-primary: #6c9fbe;
	--sflow-primary-hover: #4f82a3;
	--sflow-dark: #18384f;
	--sflow-light: #f4f9fc;
	--sflow-accent: #bdcbd6;
	--sflow-accent-hover: #dce6ed;
	--sflow-surface-blue: #e3f2fa;
	--sflow-white: #ffffff;
	--sflow-heading: #19374e;
	--sflow-body: #526a7b;
	--sflow-caption: #7b91a1;
	--sflow-border-light: #dbe7ee;
	--sflow-border-dark: rgba(255, 255, 255, 0.08);
	--sflow-primary-rgb: 108 159 190;
	--sflow-dark-rgb: 24 56 79;
	--sflow-accent-rgb: 189 203 214;

	/* Typography */
	--sflow-font-heading: "Playfair Display", Georgia, serif;
	--sflow-font-body: "Montserrat", "Segoe UI", sans-serif;
	--sflow-text-xs: 0.9375rem;
	--sflow-text-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--sflow-text-h3: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	--sflow-text-h2: clamp(2.5rem, 2rem + 2vw, 3.25rem);
	--sflow-text-h1: clamp(3.25rem, 2.35rem + 4vw, 4.5rem);

	/* Layout */
	--sflow-container: 82.5rem;
	--sflow-gutter: clamp(1rem, 3vw, 2rem);
	--sflow-section-space: clamp(5rem, 9vw, 10rem);
	--sflow-header-height: 4.75rem;

	/* Spacing */
	--sflow-space-1: 0.5rem;
	--sflow-space-2: 1rem;
	--sflow-space-3: 1.5rem;
	--sflow-space-4: 2rem;
	--sflow-space-6: 3rem;
	--sflow-space-8: 4rem;
	--sflow-space-10: 5rem;

	/* Shape */
	--sflow-radius-input: 0.75rem;
	--sflow-radius-card: 1.5rem;
	--sflow-radius-pill: 999px;
	--sflow-shadow-card: 0 1.25rem 3.75rem rgb(var(--sflow-dark-rgb) / 0.1);
	--sflow-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Layers */
	--sflow-z-header: 50;
	--sflow-z-modal: 100;
}