:root {
	/* Modern Color Palette */
	--accent: #6366f1; /* Modern indigo */
	--accent-light: #8b5cf6; /* Purple accent */
	--accent-dark: #4f46e5; /* Darker indigo */

	--background: #ffffff;
	--surface: #f8fafc; /* Light surface */
	--surface-raised: #f1f5f9; /* Elevated surface */

	--primary: #0f172a; /* Near black */
	--secondary: #475569; /* Medium gray */
	--muted: #64748b; /* Light gray */
	--border: #e2e8f0; /* Light border */

	--success: #10b981;
	--warning: #f59e0b;
	--error: #ef4444;

	/* Legacy mappings for compatibility */
	--lightAccent: #e0e7ff; /* Light indigo */
	--lighterAccent: #f0f4ff; /* Very light indigo */
	--dark: var(--secondary);
	--darker: var(--primary);
	--slate: var(--secondary);

	--white: #ffffff;
	--black: var(--primary);

	--ink: var(--primary);
	--paper: var(--background);

	/* Modern Typography */
	--accentFont: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--primaryFont: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--codeFont: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

	/* Spacing Scale */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4rem;

	/* Border Radius */
	--radius-sm: 0.375rem;
	--radius-md: 0.5rem;
	--radius-lg: 0.75rem;
	--radius-xl: 1rem;

	/* Shadows */
	--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}