/* ==========================================================================
   MAIN STYLESHEET
   ==========================================================================
   Purpose:
   Production CSS entry point.

   Import order follows the CSS architecture:

   1. Reset
   2. Variables
   3. Base styles
   4. Layout
   5. Components
   6. Pages
   7. Utilities

   Later layers intentionally override earlier layers.

   ========================================================================== */


/* ==========================================================================
   Cascade Layers
   ========================================================================== */

@layer reset,
       base,
       layout,
       components,
       pages,
       utilities;


/* ==========================================================================
   Base
   ========================================================================== */

@import url("./base/reset.css");

@import url("./base/variables.css");

@import url("./base/typography.css");


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

@import url("./layout/container.css");

@import url("./layout/grid.css");

@import url("./layout/header.css");

@import url("./layout/footer.css");


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

@import url("./components/article.css");

@import url("./components/buttons.css");

@import url("./components/cards.css");

@import url("./components/callouts.css");

@import url("./components/forms.css");

@import url("./components/images.css");

@import url("./components/navigation.css");

@import url("./components/tables.css");


/* ==========================================================================
   Pages
   ========================================================================== */

@import url("./pages/home.css");

@import url("./pages/category.css");

@import url("./pages/article-page.css");


/* ==========================================================================
   Utilities
   ========================================================================== */

@import url("./utilities/utilities.css");


/* ==========================================================================
   Print
   ========================================================================== */

@import url("./print/print.css");


/* ==========================================================================
   CSS Loading Test
   ========================================================================== */

body {
    outline: 5px solid red;
}