/* =============================================================================
 * css/app.css — stylesheet entry point.
 * -----------------------------------------------------------------------------
 * This file is the single <link> the page loads. It owns NO rules itself; it
 * only @imports the layers in cascade order:
 *
 *   1. tokens.css              design tokens (must be first — everything uses them)
 *   2. base.css                document baseline (type, scrollbar, entrance)
 *   3. components/search.css   search field + category dropdown
 *   4. components/result.css   result row, segmented control, action buttons
 *   5. components/preview.css  the centered 512 preview modal
 *   6. components/sheet.css    the mobile bottom sheet
 *   7. components/toast.css    transient feedback toasts
 *
 * Tailwind (CDN, loaded in index.html) provides layout utilities in the markup;
 * this file provides the design-system components. Light mode only, one accent.
 *
 * Why @import (and not many <link>s): one request line in the HTML, and the
 * cascade order is explicit and readable here. Components target disjoint
 * selectors, so order only matters for tokens → base → components.
 * ============================================================================= */

@import "./tokens.css";
@import "./base.css";
@import "./components/search.css";
@import "./components/result.css";
@import "./components/preview.css";
@import "./components/sheet.css";
@import "./components/toast.css";