/**
 * 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');

/* Mention Input - @mention-aware sticky note input */
@import url('./_mentionInput.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');

/* Global Search - header typeahead search widget */
@import url('./_global-search.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');

/* Sync Indicator - compact header sync status pill */
@import url('./_syncIndicator.css');

/* Sync Progress - inline progress card on settings page */
@import url('./_syncProgress.css');

/* Sync Stale Indicator - per-page stale data refresh banner */
@import url('./_syncStaleIndicator.css');

/* Sync Completion Card - persistent bottom-right completion notification */
@import url('./_syncCompletionCard.css');

/* Checkout Drawer - full-screen checkout overlay */
@import url('./_checkoutDrawer.css');

/* Checkout Payment - payment form components inside checkout drawer */
@import url('./_checkoutPayment.css');

/* Checkout Summary - order summary and downgrade view in checkout drawer */
@import url('./_checkoutSummary.css');

/* Enterprise Drawer - full-screen enterprise inquiry overlay */
@import url('./_enterpriseDrawer.css');

/* Notification Drawer - slide-out notification panel */
@import url('./_notificationDrawer.css');

/* Pricing Cards - redesigned tier cards on billing page */
@import url('./_pricingCards.css');

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