:root {
	--base-color-primary: 216, 98%;
	--base-l-primary: 52%;
	--color-primary: hsl(var(--base-color-primary), var(--base-l-primary));
	--color-primary-darker: hsl(var(--base-color-primary), calc(var(--base-l-primary) - 5%));
	--color-primary-lighter: hsl(var(--base-color-primary), calc(var(--base-l-primary) + 5%));
	--color-primary-text: #f8f9fa;
	--color-primary-link: #C7CDD0;

	--base-color-light: 210, 16%;
	--base-l-light: 98%;
	--color-light: hsl(var(--base-color-light), var(--base-l-light));
	--color-light-darker: hsl(var(--base-color-light), calc(var(--base-l-light) - 5%));
	--color-light-lighter: hsl(var(--base-color-light), calc(var(--base-l-light) + 5%));
	--color-light-text: #212529;
	--color-light-link: #374048;

	--base-color-dark: 210, 11%;
	--base-l-dark: 15%;
	--color-dark: hsl(var(--base-color-dark), var(--base-l-dark));
	--color-dark-darker: hsl(var(--base-color-dark), calc(var(--base-l-dark) - 8%));
	--color-dark-lighter: hsl(var(--base-color-dark), calc(var(--base-l-dark) + 8%));
	--color-dark-text: #f8f9fa;
	--color-dark-link: #C7CDD0;

	--color-header-text: var(--color-dark-text);
	--color-header: var(--color-dark-lighter);

	--vfm-bg: #f6f8fb;
    --hover-bg-menu: #e2e3e5;
	--vfm-surface: #ffffff;
	--vfm-surface-alt: #f8fafc;
	--vfm-surface-soft: #eef4ff;
	--vfm-border: #e4e8ef;
	--vfm-border-strong: #e9edf3;
	--vfm-text: #101828;
	--vfm-text-muted: #667085;
	--vfm-text-subtle: #98a2b3;
	--vfm-link: var(--color-light-link);
	--vfm-primary: var(--color-primary);
	--vfm-primary-hover: var(--color-primary-darker);
	--vfm-primary-soft: #eaf2ff;
	--vfm-primary-soft-2: #eef5ff;
	--vfm-danger: #dc3545;
	--vfm-danger-soft: #fff1f2;
	--vfm-warning: #b26a00;
	--vfm-warning-soft: #fff7e6;
	--vfm-success: #198754;
	--vfm-success-soft: #eaf7f0;
	--vfm-shadow-sm: 0 0.4rem 1rem rgba(16, 24, 40, 0.04);
	--vfm-shadow-md: 0 0.75rem 1.75rem rgba(16, 24, 40, 0.04);
	--vfm-shadow-lg: 0 1.5rem 4rem rgba(16, 24, 40, 0.18);
	--vfm-radius-sm: 0.3rem;
	--vfm-radius-md: 0.9rem;
	--vfm-radius-lg: 1.25rem;
	--vfm-radius-pill: 999px;
	--vfm-focus-ring: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
	--vfm-transition: 0.2s ease;
	
	/* Typography tokens */
	--vfm-font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--vfm-font-family-mono: "Menlo", "Monaco", "Courier New", monospace;
	--vfm-font-size-base: 1rem;
	--vfm-font-size-sm: 0.875rem;
	--vfm-font-size-md: 1rem;
	--vfm-font-size-lg: 1.125rem;
	--vfm-font-size-xl: 1.25rem;
	--vfm-line-height-base: 1.5;
	--vfm-line-height-tight: 1.25;
	--vfm-line-height-relaxed: 1.75;
}

.dark-mode {
	--color-light: hsl(var(--base-color-dark), var(--base-l-dark));
	--color-light-darker: hsl(var(--base-color-dark), calc(var(--base-l-dark) - 8%));
	--color-light-lighter: hsl(var(--base-color-dark), calc(var(--base-l-dark) + 8%));
	--color-light-text: var(--color-dark-text);
	--color-light-link: var(--color-dark-link);
	--color-input: var(--color-dark);
	--color-input-darker: var(--color-dark-darker);
	--color-input-text: var(--color-dark-text);

	--vfm-bg: var(--color-dark);
    --hover-bg-menu: var(--color-dark);
	--vfm-surface: var(--color-dark-lighter);
	--vfm-surface-alt: var(--color-dark-darker);
	--vfm-surface-soft: rgba(13, 110, 253, 0.14);
	--vfm-border: rgba(255, 255, 255, 0.08);
	--vfm-border-strong: rgba(255, 255, 255, 0.12);
	--vfm-text: var(--color-dark-text);
	--vfm-text-muted: #c5ced8;
	--vfm-text-subtle: #9ba7b6;
	--vfm-link: var(--color-dark-link);
	--vfm-primary-soft: rgba(13, 110, 253, 0.18);
	--vfm-primary-soft-2: rgba(13, 110, 253, 0.12);
	--vfm-danger-soft: rgba(220, 53, 69, 0.18);
	--vfm-warning-soft: rgba(255, 193, 7, 0.16);
	--vfm-success-soft: rgba(25, 135, 84, 0.16);
	--vfm-shadow-sm: 0 0.4rem 1rem rgba(0, 0, 0, 0.22);
	--vfm-shadow-md: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.22);
	--vfm-shadow-lg: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
	--vfm-focus-ring: 0 0 0 0.2rem rgba(13, 110, 253, 0.22);
}