Global Styling & Theming

Tailwind Configuration

The project extends tailwind.config.ts with brand tokens.

Usage: className="bg-primary text-primary-foreground"

| Token | Value | usage |

|-------|-------|-------|

| --background | 0 0% 100% | Page background |

| --foreground | 222.2 84% 4.9% | Main text color |

| --primary | 222.2 47.4% 11.2% | Main buttons, active states |

| --radius | 0.5rem | Border radius for cards/inputs |

BasaltCMS is designed as a dark-mode first experience.

Glassmorphism: bg-white/5 backdrop-blur-md is used extensively for panels.

Borders: Detailed 1px borders with border-white/10 add depth.

Custom utilities for micro-interactions:

.animate-in: Fade in entry.

.zoom-in-95: Subtle scale up.

.slide-in-from-bottom-2: Upward slide entry.