/* =============================================================
   Crochet Canopy — stylesheet manifest

   This is the ONLY stylesheet any HTML page links. Pages do not
   link their own CSS and never carry a <style> block. Page-specific
   rules live in css/pages/*.css and are scoped by a body class
   (.page-home, .page-shop, ...).

   Cascade order is declared up front with @layer, so a component
   can be authored in any order and still lose to a utility. Never
   rely on source order or selector weight to win — pick the layer.

   DEV:    Live Server reads this file directly; @import chains are
           fine and every file stays separately debuggable.
   DEPLOY: `npm run build:css` flattens the imports into
           dist/main.css so production pays one request, not twelve.
           Cloudflare Pages runs this as its build command.
============================================================= */

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

/* 1. Tokens — no selectors beyond :root and .section--light */
@import url("tokens.css")            layer(tokens);

/* 2. Base — reset, element defaults, typography */
@import url("base.css")              layer(base);

/* 3. Layout primitives — container, section, grid, stack */
@import url("layout.css")            layer(layout);

/* 4. Components — one file per component, alphabetical */
@import url("components/button.css") layer(components);
@import url("components/card.css")   layer(components);
@import url("components/cart.css")   layer(components);
@import url("components/form.css")   layer(components);
@import url("components/footer.css") layer(components);
@import url("components/nav.css")    layer(components);
@import url("components/product.css") layer(components);
@import url("components/social.css") layer(components);

/* 5. Pages — scoped by body class, never global */
@import url("pages/home.css")        layer(pages);
@import url("pages/shop.css")        layer(pages);
@import url("pages/about.css")       layer(pages);
@import url("pages/checkout.css")    layer(pages);

/* 6. Utilities — last word, single-purpose helpers */
@import url("utilities.css")         layer(utilities);