@charset "UTF-8";

/* ════════════════════════════════════════════════════════════════════
   Admin stylesheet entry point — imports only.

   Cascade layers (low → high precedence):
     tokens     → design tokens (colours, spacing, typography scale)
     base       → element foundation: reset, typography, forms (own, not Pico)
     layout     → page frame: shell grid, topbar, sidebar, icon bar, dropdown
     components → reusable UI: buttons, forms, tables, tabs, badges …
     pages      → page-specific styles
     utilities  → helpers (.grid …)

   themes/dark.css is imported UNLAYERED on purpose — it must always win
   over the layered light-mode defaults.
   ════════════════════════════════════════════════════════════════════ */

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

/* Cache-busting: @import URLs are NOT version-stamped by Assets::css (only
   main.css is), so bump ?v=N on every change below to force browsers to
   refetch the imported files. */

/* ── Tokens ── */
@import url("base/typography.tokens.css?v=8") layer(tokens);
@import url("base/variables.base.css?v=8") layer(tokens);

/* ── Base (element foundation) ── */
@import url("base/reset.css?v=8") layer(base);
@import url("base/typography.css?v=8") layer(base);
@import url("base/forms.css?v=8") layer(base);

/* ── Layout ── */
@import url("layout/app-topbar.css?v=8") layer(layout);
@import url("layout/app-sidebar.css?v=8") layer(layout);
@import url("layout/app-aside-icon-bar.css?v=8") layer(layout);
@import url("layout/app-page-layout.css?v=8") layer(layout);
@import url("layout/shell.css?v=8") layer(layout);

/* ── Components ── */
@import url("components/app-list-titlebar.css?v=8") layer(components);
@import url("components/app-list-toolbar.css?v=8") layer(components);
@import url("components/app-list-table.css?v=8") layer(components);
@import url("components/app-breadcrumb.css?v=8") layer(components);
@import url("components/app-badges.css?v=8") layer(components);
@import url("components/table.css?v=8") layer(components);
@import url("components/toolbar.css?v=8") layer(components);
@import url("components/button.css?v=8") layer(components);
@import url("components/pagination.css?v=8") layer(components);
@import url("components/flash.css?v=8") layer(components);
@import url("components/footer.css?v=8") layer(components);
@import url("components/tagify.css?v=8") layer(components);
@import url("components/user-menu.css?v=8") layer(components);

/* ── Pages ── */
@import url("pages/dashboard.css?v=8") layer(pages);
@import url("pages/design.css?v=8") layer(pages);
@import url("components/form.css?v=8") layer(pages);
@import url("components/tabs.css?v=8") layer(pages);
@import url("components/detail.css?v=8") layer(pages);
@import url("components/api-key.css?v=8") layer(pages);

/* ── Utilities ── */
@import url("layout/utilities.css?v=8") layer(utilities);

/* ── Themes (unlayered — always wins) ── */
@import url("themes/dark.css?v=8");

/* color-scheme must follow the @import block (imports come first per spec) */
@layer tokens {
  :root { color-scheme: light; }
  [data-theme^="dark"] { color-scheme: dark; }
}