@layer reset, tokens, base, layout, components, utilities, overrides;
@import url("reset.css") layer(reset);
@import url("tokens.css") layer(tokens);
@import url("base.css") layer(base);
@import url("fonts.css") layer(base);
@import url("layout/header.css") layer(layout);
@import url("layout/footer.css") layer(layout);
@import url("components/buttons.css") layer(components);
@import url("components/cards.css") layer(components);
@import url("components/sections.css") layer(components);
@import url("components/forms.css") layer(components);
@import url("components/facades.css") layer(components);
@import url("utilities.css") layer(utilities);
/* Not wrapped in layer(layout) like the imports above: these files already
   declare their own @layer blocks internally (layout, and home.css's
   overrides), and wrapping the whole import in layer(layout) would nest
   those declarations inside layout as sub-layers — silently losing to the
   real top-level components/overrides layers regardless of what they contain. */
@import url("pages/home.css");
@import url("pages/about.css");
@import url("pages/videos.css");
@import url("pages/newsletters.css");
@import url("pages/lectures.css");