/* =============================================================================
   BlocHost Design System
   
   A comprehensive CSS framework built for BlocHost, replacing Bootstrap.
   Based on BlocHost brand guidelines with #FF5500 orange as the primary color.
   
   Version: 1.0.0
   ============================================================================= */

/* Inter Font - Primary brand typeface */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* =========================================================================
   Core Layers (Order matters!)
   ========================================================================= */

/* 1. Design Tokens - CSS Custom Properties */
@import "_tokens.css";

/* 2. Reset - Modern CSS reset */
@import "_reset.css";

/* 3. Base - Element styles (typography, links, etc.) */
@import "_base.css";

/* =========================================================================
   Layout
   ========================================================================= */

/* 4. Grid System - Containers, rows, columns */
@import "_grid.css";

/* =========================================================================
   Components
   ========================================================================= */

/* 5. Buttons - All button variants */
@import "_buttons.css";

/* 6. Cards - Card components */
@import "_cards.css";

/* 7. Forms - Input controls and form layouts */
@import "_forms.css";

/* 8. Navigation - Navbar and nav components */
@import "_navigation.css";

/* 9. Dropdowns - Dropdown menus */
@import "_dropdowns.css";

/* 10. Alerts - Flash messages and alerts */
@import "_alerts.css";

/* 11. Badges - Status badges and pills */
@import "_badges.css";

/* 12. Tables - Table styling */
@import "_tables.css";

/* 13. Progress - Progress bars and indicators */
@import "_progress.css";

/* 14. Breadcrumbs - Breadcrumb navigation */
@import "_breadcrumbs.css";

/* 15. Modals - Modal dialogs and overlays */
@import "_modals.css";

/* =========================================================================
   Utilities & Animations
   ========================================================================= */

/* 16. Utilities - Spacing, display, text, etc. */
@import "_utilities.css";

/* 17. Animations - Transitions and keyframes */
@import "_animations.css";

/* =========================================================================
   BlocHost Brand Summary
   
   Colors:
   - Primary (Orange): #FF5500 - CTAs, links, highlights, active states
   - Black: #000000 - Headlines, primary text, strong emphasis
   - Gray: #666666 - Body text, secondary content
   - Light Gray: #E5E5E5 - Borders, dividers, subtle backgrounds
   - White: #FFFFFF - Primary background, cards, clean space
   
   Typography:
   - Font: Inter (Google Fonts)
   - Headings: Bold weight, generous spacing
   - Body: Regular weight, high readability
   
   Design Principles:
   1. Whitespace-first - Let content breathe
   2. Typography-driven - Headlines as visual anchors
   3. Selective color - Orange for emphasis only
   4. Minimal chrome - No unnecessary decoration
   5. High contrast - Black on white, always readable
   ========================================================================= */