/* =============================================================================
   DDS — Dessau Design System
   =============================================================================

   The single stylesheet entry point.

       <link rel="stylesheet" href="/dds/dds.css">

   -----------------------------------------------------------------------------
   Cascade layers
   -----------------------------------------------------------------------------

   The layer order below is declared BEFORE any layer has content, which is what
   fixes the order regardless of the order the files actually load in.

   This is the most important architectural decision in the CSS, and it is what
   a product gets for free by using DDS:

     - Unlayered CSS always beats layered CSS. A product's own stylesheet needs
       no `!important` and no specificity escalation to override anything here —
       a plain `.my-thing { padding: 0 }` wins over `.dds-card` automatically.
     - Inside DDS, a component can use a low-specificity selector without being
       accidentally overridden by a utility, because the layer decides, not the
       selector's weight.
     - `:where()` is used throughout base.css to keep element defaults at zero
       specificity, so overriding a base style never requires matching a
       selector chain.

   The practical effect: consumers stop fighting the design system's cascade,
   which is the single most common reason a design system gets abandoned.

   -----------------------------------------------------------------------------
   Load cost
   -----------------------------------------------------------------------------

   `@import` serialises requests: the browser must parse this file before it
   discovers the others. That is a real cost, accepted here because it keeps the
   source navigable with no build step, and because the files are small and
   cache well.

   There is a second cost, and it is easier to be caught by: an imported sheet is
   not guaranteed to have applied by `DOMContentLoaded`. A deferred script that
   reads a token back —
   `getComputedStyle(el).getPropertyValue('--dds-color-text-default')` — can
   therefore get an empty string, which is a valid value for almost every
   property and so fails silently. It happened on the reference's own foundations
   page, on WebKit only, while Chromium had the values in time. Anything reading
   a custom property from script should wait for `load`, or check the value and
   fall back to waiting.

   For production, either:
     - run `node scripts/bundle.mjs` and ship the generated `dds.min.css`, or
     - link the layer files directly from your own HTML in the order below, or
     - concatenate them in whatever pipeline you already have.

   All three are equivalent, and all three remove the timing problem above.
   Nothing here depends on being imported.

   -----------------------------------------------------------------------------
   The `?v=` on every import
   -----------------------------------------------------------------------------

   Generated by `node scripts/sync-cache-busting.mjs`, never typed. Each value is
   the content hash of the file it is attached to, so an edited layer file arrives
   at a browser that already has the old one.

   Versioning only the `<link>` to this file would not do that: the entry file
   would be refetched, name the same eleven import URLs it named last time, and
   every layer would still come from cache.

   Change a layer file and re-run the script. `npm run check` fails while a hash
   is stale, and `scripts/bundle.mjs` strips the query when it resolves a path.
   ============================================================================= */

@layer dds.reset,
       dds.foundation,
       dds.base,
       dds.typography,
       dds.layout,
       dds.components,
       dds.patterns,
       dds.utilities;

/* Foundations first: everything downstream reads these custom properties.
   Primitives before semantics, because the semantic layer points at them. */
@import url("./css/primitives.css?v=2b4e13ce") layer(dds.foundation);
@import url("./css/semantic.css?v=3a04c82a") layer(dds.foundation);

/* Element defaults and the shared floor (focus, motion, forced colours). */
@import url("./css/base.css?v=8ac50525");

/* Type utilities and the reading measure. */
@import url("./css/typography.css?v=4600683b");

/* Layout primitives. */
@import url("./css/layout.css?v=67e3a2fc");

/* Reusable UI building blocks, split by concern so no single file becomes
   unnavigable. All four land in the same `dds.components` layer — the split is
   for the reader, not for the cascade. */
@import url("./css/components.css?v=d88c8725");
@import url("./css/components-forms.css?v=b0f50fcb");
@import url("./css/components-navigation.css?v=53ba33bd");
@import url("./css/components-content.css?v=7073ee51");

/* Compositions that solve a user task. */
@import url("./css/patterns.css?v=cb49e69e");
@import url("./css/patterns-flows.css?v=3f9d309c");

/* Single-purpose helpers. Last, so they win inside DDS. */
@import url("./css/utilities.css?v=b7d17861");