/* ═══════════════════════════════════════════════════════════════════════════ SKILZLY.CSS — Foundation Stylesheet ──────────────────────────────────────────────────────────────────────────── Modern flat design · 8px rounded corners · Comfortable density · Mobile-first This is the foundation Skilzly stylesheet. It contains: 1. CSS variables (set per-tenant by master page from TenantBranding) 2. Reset / base styles 3. Layout helpers (containers, grids, flex) 4. Typography 5. Buttons (.btn variants) 6. Forms (inputs, selects, checkboxes, labels, validation) 7. Cards / panels / sections 8. Tables 9. Modals 10. Alerts and badges 11. Loading states 12. Utility classes 13. Mobile responsive breakpoints PHILOSOPHY: - Every brand-coloured rule uses var(--brand-*) — never hardcoded hex - Mobile-first: base styles work on phones, larger screens enhance - Components are class-based, no IDs in selectors (specificity stays low) - 8px grid: spacing values are multiples of 8 (or 4 for fine-grain) ADDING NEW STYLES: When porting a page that needs styles not here, add them in two places: - Reusable patterns (used by multiple pages) → into this file, organised into the section it fits - Page-specific one-offs → in a