/* ==========================================================================
   MERCY OUTREACH GLOBAL — INDIA
   main.css — ITCSS import orchestrator.

   Load order is STRICT. Specificity rises monotonically down this list:
     01 tokens      — variables only, no selectors that paint
     02 reset       — element normalisation
     03 base        — element defaults, @font-face, type scale
     04 layout      — the shell grid and layout primitives
     05 components  — one file per component, BEM
     06 pages       — page-level composition only, no new visual values
     07 utilities   — single-purpose overrides, last so they win

   Only 01-tokens.css may contain a raw colour value.
   Verify with:  npm run check:hex   (see tools/ and README)
   ========================================================================== */

@import url("01-tokens.css") layer(tokens);
@import url("02-reset.css") layer(reset);
@import url("03-base.css") layer(base);
@import url("04-layout.css") layer(layout);

/* --- 05 COMPONENTS ------------------------------------------------------ */
@import url("05-components/button.css")       layer(components);
@import url("05-components/header.css")       layer(components);
@import url("05-components/nav-mega.css")     layer(components);
@import url("05-components/nav-mobile.css")   layer(components);
@import url("05-components/footer.css")       layer(components);
@import url("05-components/hero.css")         layer(components);
@import url("05-components/card-appeal.css")  layer(components);
@import url("05-components/carousel.css")     layer(components);
@import url("05-components/tabs.css")         layer(components);
@import url("05-components/accordion.css")    layer(components);
@import url("05-components/counter.css")      layer(components);
@import url("05-components/chart.css")        layer(components);
@import url("05-components/thali.css")        layer(components);
@import url("05-components/form.css")         layer(components);
@import url("05-components/quick-donate.css") layer(components);
@import url("05-components/modal.css")        layer(components);

/* --- 06 PAGES ----------------------------------------------------------- */
@import url("06-pages/home.css")   layer(pages);
@import url("06-pages/donate.css") layer(pages);
@import url("06-pages/appeal.css") layer(pages);
@import url("06-pages/about.css")  layer(pages);
@import url("06-pages/get-involved.css") layer(pages);
@import url("06-pages/contact.css")      layer(pages);
@import url("06-pages/zakat.css")        layer(pages);
@import url("06-pages/work.css")         layer(pages);

/* --- 07 UTILITIES ------------------------------------------------------- */
@import url("07-utilities.css") layer(utilities);

/* Cascade layers make the ordering explicit rather than implicit in file
   sequence, which is what removes any need for !important in components. */
@layer tokens, reset, base, layout, components, pages, utilities;