---
paths: src/modules/**/*.{vue,css}
---

# CSS Design System Rules

## Documentation (READ FIRST)
- **Quick Start**: `docs/ONBOARDING_CSS.md` (5 min read)
- **Complete Patterns**: `docs/CSS_PATTERNS.md` (cards, forms, buttons, tables, etc.)
- **Design Tokens**: `docs/DESIGN_TOKENS.md` (colors, spacing, typography variables)

## Core Principles
- Use CSS variables from design tokens, NEVER hardcoded values
- Check `CSS_PATTERNS.md` BEFORE writing any CSS
- Import shared styles from `shared/frontend/styles/`

## Dark Mode Support (CRITICAL)
Dark mode is ACTIVE via `@media (prefers-color-scheme: dark)`.

**Use semantic surface tokens for backgrounds:**
| Token | Light | Dark | Use For |
|-------|-------|------|---------|
| `--surface-card` | white | dark | Card/container backgrounds |
| `--surface-ground` | light gray | darker | Page background |
| `--surface-hover` | hover gray | dark hover | Hover states |
| `--surface-border` | light border | dark border | Borders |
| `--text-color` | dark | light | Primary text |
| `--text-color-secondary` | gray | light gray | Secondary text |

**For status colors, use scales:**
- Success: `--green-50` to `--green-900` (bg: 50/100, text: 500/600)
- Warning: `--yellow-50` to `--yellow-900`
- Error: `--red-50` to `--red-900`
- Info: `--blue-50` to `--blue-900`

## Color Variable Quick Reference

### Backgrounds
```css
background: var(--surface-card);     /* Cards, modals, containers */
background: var(--surface-ground);   /* Page background */
background: var(--surface-hover);    /* Hover states */
```

### Text
```css
color: var(--text-color);            /* Primary text */
color: var(--text-color-secondary);  /* Secondary/muted text */
```

### Borders
```css
border-color: var(--surface-border); /* Standard borders */
```

### Status Colors
```css
/* Success */
background: var(--green-50);         /* Light success bg */
color: var(--green-600);             /* Success text */

/* Warning */
background: var(--yellow-50);        /* Light warning bg */
color: var(--yellow-700);            /* Warning text */

/* Error */
background: var(--red-50);           /* Light error bg */
color: var(--red-600);               /* Error text */
```

## Shared Styles to Import
- Login: `@import 'shared/frontend/styles/login.css'`
- Header: `@import 'shared/frontend/styles/layout/header.css'`
- Navigation: `@import 'shared/frontend/styles/layout/navigation.css'`

## NEVER
- Use `:deep()` for PrimeVue overrides (use `vendor/` files)
- Duplicate patterns that exist in CSS_PATTERNS.md
- Use hardcoded colors like `#2563eb` (use `var(--color-primary)`)
- Use hardcoded backgrounds like `#ffffff` or `white` (use `var(--surface-card)`)
- Create scoped CSS for patterns that already exist in shared files
- Forget dark mode - always test with `prefers-color-scheme: dark`