:root {
	/* 
	 * Colors are dynamically set by branding.json via JavaScript
	 * Edit colors in config/branding.json - NOT here!
	 */

	/* Typography */
	--font-family-primary: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	--font-family-secondary: "Georgia", "Times New Roman", serif;

	/* Font sizes */
	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;

	/* Line heights */
	--line-height-tight: 1.25;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;

	/* Spacing */
	--spacing-xs: 0.25rem;
	--spacing-sm: 0.5rem;
	--spacing-md: 1rem;
	--spacing-lg: 1.5rem;
	--spacing-xl: 2rem;
	--spacing-2xl: 2.5rem;
	--spacing-3xl: 3rem;

	/* Borders */
	--border-radius-sm: 0.25rem;
	--border-radius-md: 0.375rem;
	--border-radius-lg: 0.5rem;
	--border-radius-xl: 0.75rem;
	--border-width: 1px;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
		0 4px 6px -2px rgba(0, 0, 0, 0.05);

	/* Animation */
	--transition-fast: 150ms ease-in-out;
	--transition-normal: 250ms ease-in-out;
	--transition-slow: 350ms ease-in-out;

	/* Layout */
	--container-max-width: 800px;
	--content-padding: var(--spacing-lg);
	--form-element-height: 2.75rem;
	--button-height: 2.5rem;

	/* Breakpoints (for reference in media queries) */
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
}