@charset "utf-8";
/* The Mountaire site stylesheet. Plain CSS, no build step.

   Values come from the Figma file's variables (tokens/) and each block is
   drawn to its Figma frame at 1440, then steps itself down at the bottom of
   its own file. Breakpoints follow Figma's Responsive modes:

     1440  Monitor  (the design width; base rules)
     1280  Laptop   (width < 80rem)
     1024  Tablet   (width < 64rem)
      768  Mobile   (width < 48rem)

   Pages still on the old layout load wwwroot/assets/css/main.css instead,
   never both. */
@layer reset, tokens, fonts, base, layout, components, blocks, utilities;

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

@import url("tokens/colors.css") layer(tokens);
@import url("tokens/typography.css") layer(tokens);
@import url("tokens/spacing.css") layer(tokens);
@import url("tokens/effects.css") layer(tokens);
@import url("tokens/motion.css") layer(tokens);

@import url("fonts/fonts.css") layer(fonts);

@import url("base/base.css") layer(base);
@import url("base/type.css") layer(base);

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

@import url("components/button.css") layer(components);
@import url("components/section_heading.css") layer(components);
@import url("components/heading_reveal.css") layer(components);
@import url("components/icon_link_row.css") layer(components);
@import url("components/brand_card.css") layer(components);
@import url("components/article_card.css") layer(components);
@import url("components/product_card.css") layer(components);
@import url("components/footprints.css") layer(components);
@import url("components/round_arrows.css") layer(components);
@import url("components/form.css") layer(components);
@import url("components/site_header.css") layer(components);
@import url("components/mega_menu.css") layer(components);
@import url("components/site_footer.css") layer(components);
@import url("components/dev_note.css") layer(components);

@import url("blocks/hero_banner.css") layer(blocks);
@import url("blocks/stacked_media.css") layer(blocks);
@import url("blocks/statement.css") layer(blocks);
@import url("blocks/card_grid.css") layer(blocks);
@import url("blocks/split_media.css") layer(blocks);
@import url("blocks/category_strip.css") layer(blocks);
@import url("blocks/product_search.css") layer(blocks);
@import url("blocks/product_detail.css") layer(blocks);
@import url("blocks/nutrition_carousel.css") layer(blocks);
@import url("blocks/resource_list.css") layer(blocks);
@import url("blocks/footnote.css") layer(blocks);
@import url("blocks/content_feed.css") layer(blocks);
@import url("blocks/video_gallery.css") layer(blocks);
@import url("blocks/creed_list.css") layer(blocks);
@import url("blocks/feature_grid.css") layer(blocks);
@import url("blocks/legal_page.css") layer(blocks);
@import url("blocks/cta_band.css") layer(blocks);
@import url("blocks/history_timeline.css") layer(blocks);
@import url("blocks/tabbed_sections.css") layer(blocks);
@import url("blocks/form_section.css") layer(blocks);
@import url("blocks/testimonial.css") layer(blocks);
@import url("blocks/accordion_list.css") layer(blocks);
@import url("blocks/logo_bar.css") layer(blocks);
@import url("blocks/product_table.css") layer(blocks);
@import url("blocks/regions_map.css") layer(blocks);
@import url("blocks/location_finder.css") layer(blocks);
@import url("blocks/blog.css") layer(blocks);
@import url("blocks/recipes.css") layer(blocks);
@import url("blocks/jobs.css") layer(blocks);
@import url("blocks/two_column.css") layer(blocks);

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

/* Only html paints it (base.css). Not inherited, so its fade restyles one
   element a frame instead of the whole page. */
@property --page-bg {
    syntax: "<color>";
    inherits: false;
    initial-value: #ffffff;
}