/* ═══════════════════════════════════════════════════════════
   MAIN CSS — Entry Point
   Imports all layers in correct cascade order.
   
   Load order:
   1. Base (tokens → reset → typography → utilities)
   2. Components (reusable UI pieces)
   3. Layouts (structural)
   4. Pages (specific overrides via {% block page_css %})
   
   The existing style.css is still loaded for backward compat.
   New code should use these layered files instead.
   ═══════════════════════════════════════════════════════════ */

/* ── Layer 1: Base ── */
@import url('./base/variables.css');
@import url('./base/reset.css');
@import url('./base/typography.css');
@import url('./base/utilities.css');

/* ── Layer 2: Components ── */
@import url('./components/buttons.css');
@import url('./components/inputs.css');
@import url('./components/forms.css');
@import url('./components/form-layout.css');
@import url('./components/form-actions.css');
@import url('./components/modals.css');
@import url('./components/cards.css');
@import url('./components/tables.css');
@import url('./components/badges.css');
@import url('./components/toasts.css');
@import url('./components/loaders.css');

/* ── Layer 3: Layouts ── */
@import url('./layouts/app-layout.css');
@import url('./layouts/sidebar.css');
@import url('./layouts/header.css');
@import url('./layouts/responsive.css');

/* ── Layer 4: Pages ── */
@import url('./pages/accounting.css');