:root {
	/* Brand Colors */
	--vf-color-primary: #f05423; /* Orange/Red */
	--vf-color-secondary: #004b5a; /* Deep Blue/Teal */
	--vf-color-accent-green: #008f5a; /* Green */
	
	/* Backgrounds & Surfaces */
	--vf-bg-white: #ffffff;
	--vf-bg-light: #f4f7f6;
	--vf-bg-blue-light: #eef5f9;
	--vf-bg-yellow-light: #fffcf0;
	
	/* Text Colors */
	--vf-text-dark: #222222;
	--vf-text-muted: #555555;
	--vf-text-light: #ffffff;
	--vf-text-primary: var(--vf-color-primary);
	--vf-text-secondary: var(--vf-color-secondary);
	
	/* Typography */
	--vf-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Typography Classes */
.vf-heading-xl {
	font-family: var(--vf-font-family);
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 800;
	color: var(--vf-text-secondary);
	line-height: 1.1;
}

.vf-heading-lg {
	font-family: var(--vf-font-family);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 700;
	color: var(--vf-text-secondary);
	line-height: 1.2;
}

.vf-heading-md {
	font-family: var(--vf-font-family);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--vf-text-secondary);
}

.vf-text-body {
	font-family: var(--vf-font-family);
	font-size: 1rem;
	color: var(--vf-text-muted);
	line-height: 1.6;
}

/* Container & Sections */
.vf-section {
	padding: 4rem 1rem;
	width: 100%;
}

.vf-container {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
}

/* Buttons */
.vf-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--vf-color-primary);
	color: var(--vf-text-light);
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s;
	border: none;
	cursor: pointer;
}

.vf-btn-primary:hover {
	background-color: #d94b1f;
}

.vf-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--vf-color-secondary);
	color: var(--vf-text-light);
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s;
	border: none;
	cursor: pointer;
}

.vf-btn-secondary:hover {
	background-color: #003a45;
}

/* Cards */
.vf-card {
	background-color: var(--vf-bg-white);
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s, box-shadow 0.2s;
	border: 1px solid #eaeaea;
}

.vf-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}