Design Tokens

All visual values are CSS custom properties. Use them in your own components for consistent styling.

Colors

Token	Light	Dark	Purpose
`--arcadia-color-primary`	#2563eb	#60a5fa	Primary brand
`--arcadia-color-surface`	#ffffff	#0f172a	Page background
`--arcadia-color-surface-raised`	#ffffff	#1e293b	Cards, dialogs
`--arcadia-color-text`	#0f172a	#f1f5f9	Body text
`--arcadia-color-text-muted`	#64748b	#94a3b8	Secondary text
`--arcadia-color-border`	#e2e8f0	#334155	Borders
`--arcadia-color-danger`	#dc2626	#f87171	Error state
`--arcadia-color-success`	#16a34a	#4ade80	Success state
`--arcadia-color-warning`	#d97706	#fbbf24	Warning state

Token	Value
`--arcadia-font-sans`	system-ui, -apple-system, sans-serif
`--arcadia-text-xs`	0.75rem (12px)
`--arcadia-text-sm`	0.875rem (14px)
`--arcadia-text-base`	1rem (16px)
`--arcadia-text-lg`	1.125rem (18px)