:root {
	--drvu-surface: #f7fafc;
	--drvu-surface-dim: #d7dadc;
	--drvu-surface-bright: #f7fafc;
	--drvu-surface-container-lowest: #ffffff;
	--drvu-surface-container-low: #f1f4f6;
	--drvu-surface-container: #ebeef0;
	--drvu-surface-container-high: #e5e9eb;
	--drvu-surface-container-highest: #e0e3e5;
	--drvu-on-surface: #181c1e;
	--drvu-on-surface-variant: #43474e;
	--drvu-inverse-surface: #2d3133;
	--drvu-inverse-on-surface: #eef1f3;
	--drvu-outline: #74777f;
	--drvu-outline-variant: #c4c6cf;
	--drvu-surface-tint: #455f88;
	--drvu-primary: #002045;
	--drvu-on-primary: #ffffff;
	--drvu-primary-container: #1a365d;
	--drvu-on-primary-container: #86a0cd;
	--drvu-inverse-primary: #adc7f7;
	--drvu-secondary: #006a63;
	--drvu-on-secondary: #ffffff;
	--drvu-secondary-container: #79f7ea;
	--drvu-on-secondary-container: #007169;
	--drvu-tertiary: #0e2422;
	--drvu-on-tertiary: #ffffff;
	--drvu-tertiary-container: #243a37;
	--drvu-on-tertiary-container: #8ca4a0;
	--drvu-error: #ba1a1a;
	--drvu-on-error: #ffffff;
	--drvu-error-container: #ffdad6;
	--drvu-on-error-container: #93000a;
	--drvu-primary-fixed: #d6e3ff;
	--drvu-primary-fixed-dim: #adc7f7;
	--drvu-on-primary-fixed: #001b3c;
	--drvu-on-primary-fixed-variant: #2d476f;
	--drvu-secondary-fixed: #79f7ea;
	--drvu-secondary-fixed-dim: #5adace;
	--drvu-on-secondary-fixed: #00201d;
	--drvu-on-secondary-fixed-variant: #00504a;
	--drvu-tertiary-fixed: #cfe8e3;
	--drvu-tertiary-fixed-dim: #b3ccc7;
	--drvu-on-tertiary-fixed: #081f1d;
	--drvu-on-tertiary-fixed-variant: #354b48;
	--drvu-background: #f7fafc;
	--drvu-on-background: #181c1e;
	--drvu-surface-variant: #e0e3e5;

	--drvu-font: "Plus Jakarta Sans", system-ui, sans-serif;
	--drvu-font-headline: var(--drvu-font);
	--drvu-font-body: var(--drvu-font);

	--drvu-headline-xl: 700 48px/1.2 var(--drvu-font-headline);
	--drvu-headline-lg: 600 32px/1.3 var(--drvu-font-headline);
	--drvu-headline-lg-mobile: 600 28px/1.3 var(--drvu-font-headline);
	--drvu-headline-md: 600 24px/1.4 var(--drvu-font-headline);
	--drvu-body-lg: 400 18px/1.6 var(--drvu-font-body);
	--drvu-body-md: 400 16px/1.6 var(--drvu-font-body);
	--drvu-label-md: 600 14px/1.2 var(--drvu-font-body);
	--drvu-caption: 400 12px/1.4 var(--drvu-font-body);

	--drvu-tracking-headline: -0.02em;
	--drvu-tracking-label: 0.05em;

	--drvu-radius-sm: 0.25rem;
	--drvu-radius: 0.5rem;
	--drvu-radius-md: 0.75rem;
	--drvu-radius-lg: 1rem;
	--drvu-radius-xl: 1.5rem;
	--drvu-radius-full: 9999px;

	--drvu-unit: 8px;
	--drvu-container: 1250px;
	--drvu-gutter: 24px;
	--drvu-margin: 64px;
	--drvu-margin-mobile: 20px;
	--drvu-stack-sm: 8px;
	--drvu-stack-md: 16px;
	--drvu-stack-lg: 32px;
	--drvu-section: 80px;
	--drvu-nav-h: 80px;

	--drvu-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.04);
	--drvu-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--drvu-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--drvu-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	--drvu-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--drvu-bento-hover: 0 20px 25px -5px rgba(0, 0, 0, 0.04), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

@media (max-width: 1023px) {
	:root {
		--drvu-headline-xl: 700 36px/1.2 var(--drvu-font-headline);
		--drvu-headline-lg: 600 28px/1.3 var(--drvu-font-headline);
		--drvu-margin: 20px;
	}
}