/* ═══════════════════════════════════════════════════════════════════
   main.css — Jules site CSS entry point
   Import map + @layer declarations only. No rules here.
   Layer order determines cascade priority.
   ═══════════════════════════════════════════════════════════════════ */

@layer base, typography, layout, components, animations, utilities;

/* BASE */
@import url('base/reset.css')     layer(base);
@import url('base/tokens.css')    layer(base);

/* TYPOGRAPHY */
@import url('typography/type-scale.css') layer(typography);
@import url('typography/prose.css')      layer(typography);

/* LAYOUT */
@import url('layout/grid.css')    layer(layout);
@import url('layout/nav.css')     layer(layout);
@import url('layout/footer.css')  layer(layout);

/* COMPONENTS */
@import url('components/article-card.css') layer(components);
@import url('components/hero.css')         layer(components);
@import url('components/pull-quote.css')   layer(components);
@import url('components/buttons-forms.css') layer(components);

/* ANIMATIONS */
@import url('animations/reveals.css')   layer(animations);
@import url('animations/micro.css')     layer(animations);
@import url('animations/parallax.css')  layer(animations);

/* UTILITIES (unlayered — always win specificity) */
@import url('utilities/utils.css');
@import url('utilities/responsive.css');

/* PAGE-SPECIFIC (unlayered — page-scope overrides) */
@import url('pages/home.css');
@import url('pages/articles.css');
@import url('pages/article.css');
@import url('pages/about.css');
@import url('pages/contact.css');