# Global Typography System

## Summary
Create CSS custom properties for all font sizes, defined in `app.css` `:root`, derived from the sidebar's sizing hierarchy. Replace all hardcoded font-size values across every component CSS file and scoped `<style>` block with the variables.

## Sidebar Reference (the baseline)
- Sidebar header (h1): `1.4rem`
- Nav item text: `0.95rem`
- Submenu item text: `0.85rem`
- Nav icon: `1.1rem`
- Submenu icon: `0.9rem`
- Expand icon: `0.7rem`
- Footer text: `0.85rem`

## CSS Variables (in `app.css :root`)

```css
/* Typography scale */
--font-size-page-title: 1.4rem;      /* h1 page headings (matches sidebar header) */
--font-size-section-title: 1.1rem;   /* h2 panel/section headings */
--font-size-card-title: 0.95rem;     /* h3 card titles, stat labels */
--font-size-body: 0.95rem;           /* default body/nav text */
--font-size-body-sm: 0.9rem;         /* secondary text, timestamps, dropdowns */
--font-size-label: 0.85rem;          /* labels, submenu, badges, small text */
--font-size-caption: 0.8rem;         /* table headers, bar labels */
--font-size-tiny: 0.75rem;           /* expand icons, bar values */
--font-size-stat-value: 2rem;        /* large dashboard stat numbers */
--font-size-icon: 1.1rem;            /* icons */
--font-size-icon-sm: 0.9rem;         /* small icons */
--font-size-subtitle: 0.85rem;       /* header subtitle/description */
```

## Files to Modify

### 1. `frontend/src/app.css`
- Add all `--font-size-*` variables to `:root`
- Fix duplicate font-family (remove from app.css, keep App.svelte's)

### 2. `frontend/src/App.svelte` (style block)
- Global `.header h1/h2`: `28px` → `var(--font-size-page-title)`
- Global `.header p`: `14px` → `var(--font-size-subtitle)`
- `.sidebar-header h1`: `1.4rem` → `var(--font-size-page-title)`
- `.nav-btn`: `0.95rem` → `var(--font-size-body)`
- `.nav-icon`: `1.1rem` → `var(--font-size-icon)`
- `.expand-icon`: `0.7rem` → `var(--font-size-tiny)`
- `.submenu-btn`: `0.85rem` → `var(--font-size-label)`
- `.submenu-icon`: `0.9rem` → `var(--font-size-icon-sm)`
- `.main-footer p`: `0.85rem` → `var(--font-size-label)`

### 3. `frontend/src/components/Dashboard/Dashboard.css`
- `.header h1`: `28px` → `var(--font-size-page-title)`
- `.header p`: `14px` → `var(--font-size-subtitle)`
- `.loading`: `1.1rem` → `var(--font-size-section-title)`
- `.stat-card h3`: `0.95rem` → `var(--font-size-card-title)`
- `.stat-value`: `2.5rem` → `var(--font-size-stat-value)`
- `.stat-percentage`: `0.9rem` → `var(--font-size-body-sm)`
- `.panel h2`: `1.1rem` → `var(--font-size-section-title)`
- `.bar-value`: `0.75rem` → `var(--font-size-tiny)`
- `.bar-label`: `0.8rem` → `var(--font-size-caption)`
- `.metrics-table th`: `0.85rem` → `var(--font-size-label)`
- `.region-card h3`: `0.95rem` → `var(--font-size-card-title)`
- `.region-stat .stat-label`: `0.7rem` → `var(--font-size-tiny)`
- `.region-stat .stat-number`: `1rem` → `var(--font-size-body)`
- Media query `.stat-value`: `2rem` → `var(--font-size-stat-value)`

### 4. `frontend/src/components/Incident/IncidentList/IncidentList.css`
- `.header h1`: `28px` → `var(--font-size-page-title)`
- `.header p`: `14px` → `var(--font-size-subtitle)`
- `.filter-group label`: `1rem` → `var(--font-size-body)`
- `.filter-group select`: `1rem` → `var(--font-size-body)`
- `.stats span`: `0.9rem` → `var(--font-size-body-sm)`
- `.loading`: `1.1rem` → `var(--font-size-section-title)`
- `.incidents-table th`: `0.8rem` → `var(--font-size-caption)`
- `.col-created`: `0.9rem` → `var(--font-size-body-sm)`
- `.severity-badge`: `0.85rem` → `var(--font-size-label)`
- `.status-badge`: `0.85rem` → `var(--font-size-label)`
- `.expand-btn`: `0.75rem` → `var(--font-size-tiny)`
- `.action-select`: `0.9rem` → `var(--font-size-body-sm)`
- `.history-btn`: `1.1rem` → `var(--font-size-icon)`
- `.card-title`: `0.9rem` → `var(--font-size-body-sm)`
- `.field-label`: `0.85rem` → `var(--font-size-label)`
- `.field-value`: `0.95rem` → `var(--font-size-body)`
- `.helpdesk-name-large`: `1rem` → `var(--font-size-body)`
- `.helpdesk-department`: `0.8rem` → `var(--font-size-caption)`
- `.tech-name-large`: `1rem` → `var(--font-size-body)`
- `.tech-status`: `0.8rem` → `var(--font-size-caption)`
- `.description-text`: `0.95rem` → `var(--font-size-body)`
- Media query values updated accordingly

### 5. `frontend/src/components/Incident/AtmHistory/AtmHistory.css`
- `.header h1`: `28px` → `var(--font-size-page-title)`
- `.header p`: `14px` → `var(--font-size-subtitle)`
- `.filter-group label`: `0.85rem` → `var(--font-size-label)`
- `.filter-group select`: `0.9rem` → `var(--font-size-body-sm)`
- `.incidents-table th`: `0.8rem` → `var(--font-size-caption)`
- `.col-created`: `0.85rem` → `var(--font-size-label)`
- `.col-resolved`: `0.85rem` → `var(--font-size-label)`
- `.severity-badge/.status-badge`: `0.75rem` → `var(--font-size-label)` (fix inconsistency — was smaller than IncidentList)
- `.no-selection p`: `1.1rem` → `var(--font-size-section-title)`
- `.no-data .hint`: `0.85rem` → `var(--font-size-label)`
- Media query values updated accordingly

### 6. `frontend/src/components/JournalEvents/JournalEvents.css`
- `.header h1`: `28px` → `var(--font-size-page-title)`
- `.header p`: `14px` → `var(--font-size-subtitle)`
- `.filter-group select`: `1rem` → `var(--font-size-body)`
- `.event-icon`: `1.5rem` (keep as-is — special large icon, not in scale)
- `.event-time`: `0.9rem` → `var(--font-size-body-sm)`
- `.event-meta`: `0.9rem` → `var(--font-size-body-sm)`
- `.event-source`: `0.85rem` → `var(--font-size-label)`

### 7. `frontend/src/components/Incident/CreateIncident/CreateIncident.css`
- `.btn-create`: `1rem` → `var(--font-size-body)`
- `.modal-header h2`: `1.5rem` → `var(--font-size-page-title)` (was inconsistent)
- `.close-btn`: `1.5rem` (keep — decorative close X)
- Form inputs: `1rem` → `var(--font-size-body)`
- Buttons: `1rem` → `var(--font-size-body)`

### 8. `frontend/src/components/AtmProperties/AtmProperties.svelte` (scoped style)
- Map all `px` font sizes to variables (28px→page-title, 20px→section-title area, 14px→subtitle, 13px→label, 12px→caption area)
- Keep special large sizes like 48px/32px icons as-is

### 9. `frontend/src/components/Workflow/IncidentWorkflow.svelte` (scoped style)
- Map all font-size values to variables following same pattern

### 10. `frontend/src/components/common/MultiSelectDropdown.svelte` (scoped style)
- `.msd-toggle`: `1rem` → `var(--font-size-body)`
- `.msd-item`: `0.9rem` → `var(--font-size-body-sm)`
- `.msd-arrow`: `0.75rem` → `var(--font-size-tiny)`

### 11. `frontend/src/components/common/AtmInfoCard.svelte` (scoped style)
- `.atm-info-label`: `0.7rem` → `var(--font-size-tiny)`
- `.atm-info-value`: `0.95rem` → `var(--font-size-body)`
- `.card-status-badge`: `0.75rem` → `var(--font-size-tiny)`

### 12. `frontend/src/components/common/AtmSelector.svelte` (scoped style)
- `.selector-label`: `14px` → `var(--font-size-subtitle)`
- `.atm-select`: `14px` → `var(--font-size-subtitle)`
- `.position-indicator`: `12px` → `var(--font-size-caption)` approx
- Compact variants: `13px`/`14px` → corresponding variables

## Key normalizations (fixes inconsistencies)
- Page title h1: was `28px` everywhere → now `1.4rem` (matching sidebar header)
- AtmHistory badges: were `0.75rem` (smaller) → now `var(--font-size-label)` = `0.85rem` (same as IncidentList)
- Filter labels: were `0.85rem` in AtmHistory vs `1rem` in IncidentList → both get `var(--font-size-label)` = `0.85rem`
- Modal h2: was `1.5rem` → `var(--font-size-page-title)` = `1.4rem`
- Font-family: remove duplicate from `app.css`, keep App.svelte global

## Verification
- `cd frontend && npm run build` — build must succeed
- Visual check: all text should look consistent across pages
- Sidebar text sizes unchanged (just using variables now)