``` ## Dark Mode Dark mode is implemented via the `.dark` class on the `` element. ### Adding Dark Mode Styles Use the `dark:` variant for dark mode overrides: ```tsx // Automatic - uses CSS variables that change with theme

// Manual override - when you need different behavior

``` ### Testing Dark Mode 1. Toggle with the theme switcher in the nav 2. Or use browser DevTools to add/remove `.dark` class on `` ## Spacing & Layout Use consistent spacing from the Tailwind scale: | Class | Size | |-------|------| | `p-2` | 0.5rem (8px) | | `p-4` | 1rem (16px) | | `p-6` | 1.5rem (24px) | | `p-8` | 2rem (32px) | ### Mobile-First Responsive Always start with mobile styles, then add larger breakpoints: ```tsx // Good - mobile first

// Bad - desktop first

``` ## Typography Use the system font stack (already configured): ```tsx

// 30px bold

// 24px semibold

// 20px medium
// 16px regular // 14px muted ``` ## Interactive States Use consistent state styles: ```tsx

// 30px bold

// 24px semibold

// 20px medium // 16px regular // 14px muted ``` ## Interactive States Use consistent state styles: ```tsx

// 20px medium
// 16px regular // 14px muted ``` ## Interactive States Use consistent state styles: ```tsx