/**
 * SurgeTK Design System
 * =====================
 * Main entry point for the design system styles.
 *
 * Import order is intentional:
 * 1. Tokens - CSS custom properties (must be first)
 * 2. Typography - Base text styles
 * 3. Layout - Structural components
 * 4. Icons - Lucide icon base styles and utilities
 * 5. Buttons - Button components
 * 6. Cards - Card containers and tiles
 * 7. Chips - Status indicators and tags
 * 8. Avatars - User photos and letter initials
 * 9. Tables - Data tables and grids
 * 10. Forms - Form components
 * 11. Search Controls - Search bars and toolbars
 * 12. Modals - Bootstrap modal overrides
 * 13. Dropdowns - Dropdown menus
 * 14. Alerts - Toast notifications and inline alerts
 * 15. Tabs - Tab navigation and content panels
 * 16. Hints - Floating tips and notifications
 * 17. Guided Setup - Tours, workflows, spotlights, and progress widgets
 * 18. Utilities - Utility classes (should be last to allow overrides)
 *
 * Usage:
 * Import this file in your HTML or main stylesheet:
 * <link rel="stylesheet" href="/css/design-system/index.css">
 * or
 * @import url('/css/design-system/index.css');
 */

/* Design tokens - foundational CSS custom properties */
@import url('./_tokens.css');

/* Typography - headings, body text, links */
@import url('./_typography.css');

/* Layout - containers, grid, flexbox utilities */
@import url('./_layout.css');

/* Icons - Lucide icon base styles and utilities */
@import url('./_icons.css');

/* Buttons - button variants and states */
@import url('./_buttons.css');

/* Cards - card containers, tiles, content slots */
@import url('./_cards.css');

/* Chips - status indicators, tags, and categories */
@import url('./_chips.css');

/* Avatars - user photos and letter initials */
@import url('./_avatars.css');

/* Tables - data tables, grids, and list views */
@import url('./_tables.css');

/* Forms - inputs, selects, checkboxes, etc. */
@import url('./_forms.css');

/* Search Controls - search bars, toolbars with search */
@import url('./_search-controls.css');

/* Modals - Bootstrap modal overrides and extensions */
@import url('./_modals.css');

/* Dropdowns - Bootstrap dropdown overrides */
@import url('./_dropdowns.css');

/* Alerts - toast notifications and inline alerts */
@import url('./_alerts.css');

/* Tabs - tab navigation and content panels */
@import url('./_tabs.css');

/* Hints - floating tips and non-intrusive notifications */
@import url('./_hints.css');

/* Guided Setup - tours, workflows, spotlight overlays, and progress widgets */
@import url('./_guidedSetup.css');

/* Sidebar Tracker - onboarding progress widget in sidebar */
@import url('./_sidebarTracker.css');

/* Admin - admin-only page styles (diagnostics, errors, etc.) */
@import url('./_admin.css');

/* Utilities - single-purpose helper classes (last for highest specificity) */
@import url('./_utilities.css');