/**
 * JADE Design System
 * Main CSS entry point
 *
 * This file imports all JADE components in the correct order.
 * Developers can either:
 * 1. Import this single file for the complete design system
 * 2. Import individual component files for tree-shaking
 *
 * Usage:
 * <link rel="stylesheet" href="css/jade.css">
 *
 * Or import specific components:
 * @import url('css/design-tokens.css');
 * @import url('css/components/buttons.css');
 */

/* ============================================
   DESIGN TOKENS (REQUIRED)
   ============================================ */
@import url('design-tokens.css');

/* ============================================
   CORE COMPONENTS
   ============================================ */
@import url('components/layout.css');
@import url('components/utilities.css');

/* ============================================
   UI COMPONENTS
   ============================================ */
@import url('components/buttons.css');
@import url('components/button-group.css');
@import url('components/forms.css');
@import url('components/verification-code.css');
@import url('components/radio-buttons.css');
@import url('components/checkbox-grid.css');
@import url('components/preset-checkbox.css');
@import url('components/searchable-select.css');
@import url('components/divider.css');
@import url('components/section-container.css');
@import url('components/cards.css');
@import url('components/badges.css');
@import url('components/navigation.css');
@import url('components/messages.css');
@import url('components/results.css');
@import url('components/toast.css');
@import url('components/loading.css');
@import url('components/stepper.css');
@import url('components/success-celebration.css');
@import url('components/confetti.css');

/**
 * IMPORTANT: Add class="jade-theme" to your <body> or main wrapper element
 *
 * Example:
 * <body class="jade-theme">
 *   <!-- Your content here -->
 * </body>
 */