/* ========================================
   LibraProducts UI Components
   Design System Entry Point

   This file imports all CSS modules in the
   correct order for the design system.
   ======================================== */

/*
   HOW TO USE:
   -----------
   Include this single file in your App.razor:

   <link rel="stylesheet" href="_content/LibraProducts.UI.Components/css/libra-components.css" />

   This will load the entire design system including:
   - CSS Variables (design tokens)
   - Base styles (reset, typography)
   - Utility classes
   - Component styles (buttons, forms, grid, cards, badges)
*/

/* ========================================
   1. Variables (Design Tokens)
   Must be first - defines all CSS custom properties
   ======================================== */
@import url('./_variables.css');

/* ========================================
   2. Base Styles
   CSS reset, typography, and foundation styles
   ======================================== */
@import url('./_base.css');

/* ========================================
   3. Utilities
   Helper classes for layout, spacing, etc.
   ======================================== */
@import url('./_utilities.css');
@import url('./_layout.css');

/* ========================================
   4. Components
   Individual component styles
   ======================================== */
@import url('./_buttons.css');
@import url('./_forms.css');
@import url('./_grid.css');
@import url('./_cards.css');
@import url('./_badges.css');

/* ========================================
   Component Namespace
   All RCL components should use .libra-* prefix
   ======================================== */

/*
   NAMING CONVENTIONS:
   -------------------
   .libra-btn          - Buttons
   .libra-input        - Form inputs
   .libra-select       - Select dropdowns
   .libra-checkbox     - Checkboxes
   .libra-radio        - Radio buttons
   .libra-switch       - Toggle switches
   .libra-form-*       - Form layout helpers

   .libra-grid         - Data grid container
   .libra-grid-*       - Grid sub-components

   .libra-card         - Card container
   .libra-card-*       - Card sub-components

   .libra-badge        - Status badges
   .libra-status       - Status indicators
   .libra-tag          - Removable tags

   .libra-alert        - Alert messages
   .libra-modal        - Modal dialogs
   .libra-toast        - Toast notifications
*/

/* ========================================
   Print Styles
   ======================================== */
@media print {
    .libra-no-print {
        display: none !important;
    }

    .libra-card {
        box-shadow: none;
        border: 1px solid #000;
    }

    .libra-btn {
        border: 1px solid #000;
    }
}