@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");