/* ════════════════════════════════════════════════════════════════
   Mo Mansour — portfolio stylesheet.

   This file does two things and nothing else: it declares the cascade
   layer order, then imports each stylesheet into its layer.

   The layer order is fixed here, up front, so it no longer depends on
   the order the files happen to load in. The layer() keyword on each
   @import is what keeps the component files free of @layer wrappers.

   No bundler. Eleventy copies this directory through verbatim and the
   browser resolves the @imports, which keeps the file split visible in
   devtools and keeps the layer order trivially correct. Worth the extra
   requests over HTTP/2 on a static host.
   ════════════════════════════════════════════════════════════════ */

@layer config, tokens, base, type, layout, frame, components, tools;

@import url("fonts.css");

/* Tunable values, then the named palettes that override them. */
@import url("config.css") layer(config);
@import url("palettes.css") layer(config);

/* Everything derived from the above. */
@import url("tokens.css") layer(tokens);

/* Element defaults, typographic roles, the grid, the sheet. */
@import url("base.css") layer(base);
@import url("type.css") layer(type);
@import url("layout.css") layer(layout);
@import url("frame.css") layer(frame);

/* One file per component. */
@import url("components/skip.css") layer(components);
@import url("components/chrome.css") layer(components);
@import url("components/theme-button.css") layer(components);
@import url("components/seg.css") layer(components);
@import url("components/status.css") layer(components);
@import url("components/focus-box.css") layer(components);
@import url("components/placeholder.css") layer(components);
@import url("components/list.css") layer(components);
@import url("components/empty.css") layer(components);
@import url("components/works.css") layer(components);
@import url("components/cards.css") layer(components);
@import url("components/figure.css") layer(components);
@import url("components/panel.css") layer(components);
@import url("components/rows.css") layer(components);
@import url("components/facts.css") layer(components);
@import url("components/cv.css") layer(components);
@import url("components/blockquote.css") layer(components);
@import url("components/prose.css") layer(components);
@import url("components/cta.css") layer(components);
@import url("components/file-link.css") layer(components);

/* The theme picker, last in its own layer so it can sit over the page. */
@import url("components/theme-picker.css") layer(tools);
@import url("components/inspect.css") layer(tools);

/* Unlayered, and last. See root.css for why. */
@import url("root.css");