/* ============================================================
   File: app.css
   Purpose: Canonical import/link order reference.
   Project: DevZTools
   ============================================================ */

/* ============================================================
   Canonical Import / Link Order (CSS-ARCHITECTURE.md §4)
   ------------------------------------------------------------
   During development, app.css serves as the single CSS entry
   point using ordered @import statements. Production may later
   replace this with a bundled stylesheet if a build process is
   adopted. The canonical import order remains unchanged.

   Order:
   1. base/tokens.css        — Everything depends on tokens
   2. base/reset.css         — Erase browser inconsistencies
   3. base/typography.css    — Element-level type defaults
   4. themes/dark.css        — Semantic token overrides
   5. utilities/utilities.css— Approved utility classes
   6. components/*.css       — One block per file, alphabetical
   7. layouts/layout.css     — Shared page scaffold
   8. layouts/homepage.css   — Homepage arrangement
      (then layouts/tool-page.css on tool pages)
   ============================================================ */

/* ---- Base ------------------------------------------------ */
@import "./base/tokens.css";
@import "./base/reset.css";
@import "./base/typography.css";

/* ---- Themes ---------------------------------------------- */
@import "./themes/dark.css";

/* ---- Utilities ------------------------------------------- */
@import "./utilities/utilities.css";

/* ---- Components (alphabetical) --------------------------- */
@import "./components/advertisement.css";
@import "./components/command-palette.css";
@import "./components/experience.css";
@import "./components/mode-tabs.css";
@import "./components/category.css";
@import "./components/hero.css";
@import "./components/popular-tools.css";
@import "./components/quick-tools.css";
@import "./components/search.css";
@import "./components/site-footer.css";
@import "./components/site-header.css";
@import "./components/site-nav.css";
@import "./components/theme-toggle.css";
@import "./components/tool-card.css";
@import "./components/tool-categories.css";
@import "./components/tool-code-field.css";
@import "./components/tool-code-output.css";
@import "./components/tool-sidebar.css";

/* ---- Layouts --------------------------------------------- */
@import "./layouts/layout.css";
@import "./layouts/homepage.css";
@import "./layouts/app-shell.css";
@import "./layouts/tool-page.css";