/* ============================================================================
   zplex-ddb - the HOST layer.
   ----------------------------------------------------------------------------
   The design system lives in x2203 and is reached by a symlink, not a copy:
     design-specs/tokens.css   every colour, size and face
     zplex-preset.css          the generic component rules

   The preset deliberately does NOT own the surfaces - the greys, the
   backgrounds, the hairlines. Those belong to the ddb. And so does the ddb's
   own scale: the reading measure, the content frame, the chapter geometry.

   So the split is by KIND, and each kind has exactly one home:

     ddb-tokens.css   the VALUES - every token the ddb itself declares
     ddb-host.css     this file - the chain that reaches them
     ddb-modes.css    GENERATED - the design system's forced modes
     styles.css       the chrome - the RULES that use the values

   Before, the ddb's own values sat inside this file, split across five
   separate `:root` blocks, and the reader had to open two files to learn
   what colour the background was. Now there is ONE place to look.

   The three colour modes are declared in ddb-tokens.css too, because the
   gear in the top bar offers them: light, dark, and system. "System" is
   the absence of a choice, and the media query is what does the work.
   ========================================================================== */

@import url("zplex-preset.css");
/* the forced light and dark modes, generated from the tokens — it comes
   after the preset so the tokens' own values are the ones it overrides */
@import url("ddb-modes.css");
/* the ddb's OWN values - the surfaces, the scale, the chapter geometry.
   It comes last so the ddb's own tokens are the ones in force. */
@import url("ddb-tokens.css");