@layer tokens, base, layout, components, utilities;

@import "./tokens/colors.css" layer(tokens);
@import "./tokens/typography-and-spacing.css" layer(tokens);

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

@import "./layout/content-grid.css" layer(layout);
@import "./layout/columns-grid.css" layer(layout);
@import "./layout/page.css" layer(layout);
@import "./layout/dashboard.css" layer(layout);

@import "./components/icons.css" layer(components);
@import "./components/controls.css" layer(components);
@import "./components/alerts.css" layer(components);
@import "./components/tables.css" layer(components);
@import "./components/dialogs.css" layer(components);
@import "./components/lists.css" layer(components);
@import "./components/cards.css" layer(components);
@import "./components/meters.css" layer(components);
@import "./components/code-editor.css" layer(components);
@import "./views/email.css" layer(components);
@import "./views/workers.css" layer(components);

@import "./utilities/helpers.css" layer(utilities);

html {
    background-color: var(--color-base-bg);
    color: var(--color-base-fg);
}