# CSS Architecture
## Overview
The CSS has been refactored to follow a modular, component-based architecture with a centralized design system.
## Structure
```
src/
├── App.css # Global styles, CSS custom properties, utilities
├── styles/
│ ├── utilities.css # Shared utility classes and patterns
│ └── components.css # Component CSS index (optional)
└── components/
├── Dashboard.css # Dashboard layout styles
├── LiveProgressIndicator.css
└── [component]/
└── ComponentName.css # Component-specific styles
```
## Design System
### CSS Custom Properties
All design tokens are defined in `App.css` as CSS custom properties:
- **Colors**: `--color-*` (dark theme palette)
- **Spacing**: `--spacing-*` (xs to 3xl scale)
- **Typography**: `--font-*` (xs to 2xl scale)
- **Border Radius**: `--radius-*` (sm to full)
- **Shadows**: `--shadow-*` (sm to lg)
- **Transitions**: `--transition-*` (fast, normal, slow)
- **Z-Index**: `--z-*` (layering scale)
### Utility Classes
Common patterns available globally:
- **Layout**: `.flex`, `.flex-col`, `.flex-1`, `.items-center`, etc.
- **Spacing**: `.gap-sm`, `.gap-md`, `.gap-lg`
- **Typography**: `.text-center`, `.text-secondary`, `.font-weight-*`
- **Buttons**: `.btn`, `.btn-primary`, `.btn-sm`, `.btn-round`
- **Status**: `.status-success`, `.status-warning`, `.status-error`
- **Code**: `.code-block`, `.code-inline`
## Component Organization
Each component has its own CSS file imported directly in the component:
```tsx
// ComponentName.tsx
import './ComponentName.css';
```
### Benefits
1. **Modular**: Each component owns its styles
2. **Maintainable**: Easy to find and update component-specific styles
3. **Scalable**: Add new components without affecting existing styles
4. **Consistent**: Shared design tokens ensure visual consistency
5. **Modern**: Uses CSS custom properties and modern CSS features
## Usage Guidelines
### Design Tokens
Always use CSS custom properties for consistent theming:
```css
/* Good */
.my-component {
padding: var(--spacing-lg);
color: var(--color-text-primary);
border-radius: var(--radius-md);
}
/* Avoid */
.my-component {
padding: 16px;
color: #e0e0f0;
border-radius: 8px;
}
```
### Utility Classes
Use utility classes for common patterns:
```tsx
// Good
<div className="flex items-center gap-md">
// Avoid custom CSS for simple layouts
```
### Component Styles
Keep component-specific styles in their own CSS files:
```css
/* ComponentName.css */
.component-name {
/* Component-specific styles here */
}
.component-name__element {
/* BEM-style naming for sub-elements */
}
```
## Responsive Design
Responsive breakpoints are handled with custom properties that adapt at different screen sizes, maintaining consistency across all components.
