Shadows
Shadows create depth and elevation. Syhrezz uses a purposeful shadow system — each level maps to a specific context. Never use arbitrary box-shadow values in components.
Elevation Scale
Shadow intensity increases with interaction and z-index. Cards at rest use minimal shadow. Hovered cards, dropdowns, modals, and toasts each have a defined elevation level.
shadow-xs
0 1px 3px rgba(0,0,0,0.06)
Table wrap, subtle lift
shadow-sm
0 4px 6px rgba(0,0,0,0.02)
Card default state
shadow-md
0 4px 16px rgba(37,99,235,0.06)
Sales/manager cards (blue tint)
shadow-lg
0 12px 30px rgba(0,0,0,0.06)
Card hover state
shadow-xl
0 12px 40px rgba(67,56,202,0.35)
Hero banner, director cards
shadow-btn-primary
0 4px 14px rgba(99,102,241,0.3)
Primary button default
shadow-btn-hover
0 6px 20px rgba(99,102,241,0.4)
Primary button hover state
shadow-modal
0 20px 60px rgba(0,0,0,0.2)
Modal dialog
shadow-toast
0 8px 24px rgba(0,0,0,0.1)
Toast notifications, dropdowns
shadow-sidebar
10px 0 30px rgba(0,0,0,0.1)
Sidebar right edge
Usage Rules
| Token | State | Component |
|---|---|---|
| --shadow-xs | Default | Table wrap, subtle containers |
| --shadow-sm | Default | All standard cards at rest |
| --shadow-md | Default | Sales/manager role cards (blue-tinted) |
| --shadow-lg | Hover | All cards on hover — replaces shadow-sm |
| --shadow-xl | Always | Hero banner, director executive cards |
| --shadow-btn-primary | Default | Primary and danger buttons |
| --shadow-btn-hover | Hover | Primary button hover — replaces shadow-btn-primary |
| --shadow-modal | Always | Modal dialog container only |
| --shadow-toast | Always | Toast notifications, dropdown menus |
| --shadow-sidebar | Always | Fixed sidebar right edge only |
AI Implementation Notes
For AI coding assistants: Cards always use
--shadow-sm at rest and --shadow-lg on hover via transition: var(--transition-smooth). Never add shadow to plain divs or nav items. KPI cards use transform:translateY(-4px) on hover instead of changing shadow. Modals always use --shadow-modal. Toasts and dropdowns always use --shadow-toast.