/* ============================================================
   app.css — single entrypoint loaded by every page. Order
   matters: tokens first, then reset (uses tokens), then base
   primitives, then component layer, then chrome (overrides
   primitives where needed), then modal layer (highest paint),
   then utility classes (highest specificity).

   Ported from agent-workdir/mockups-v3/assets/css/app.css; the
   @import order is canonical and matches the mockup byte-for-byte
   (_components BEFORE _chrome — chrome overrides component
   primitives where needed). The WP-preset alias block at the end
   is a NEW addition (D3 §6.1), bridging --wp--preset--* (what core
   blocks emit) ↔ the mockup --color-* / --space-* / --font-*
   names (what the ported CSS consumes) so neither side breaks.
   Values stay OWNED by _tokens.css; the aliases are pointers,
   never new values.
   ============================================================ */
@import url("./_tokens.css");
@import url("./_reset.css");
@import url("./_base.css");
@import url("./_components.css");
@import url("./_chrome.css");
@import url("./_modal.css");
@import url("./_utilities.css");

/* --- WP preset ↔ mockup token bridge (alias-only; values OWNED by _tokens.css) ---
   So core-block markup emitting --wp--preset--color--primary etc. resolves
   against the same values _tokens.css already defined for --color-*. Both
   directions track dark mode automatically because the aliases point INTO
   _tokens.css, which carries the [data-theme="dark"] block. */
:root {
  --wp--preset--color--primary:        var(--color-primary);
  --wp--preset--color--ink:            var(--color-ink);
  --wp--preset--color--on-ink:         var(--color-on-ink);
  --wp--preset--color--muted:          var(--color-muted);
  --wp--preset--color--surface:        var(--color-surface-soft);
  --wp--preset--color--border:         var(--color-hairline-soft);

  --wp--preset--spacing--xs:           var(--space-xs);
  --wp--preset--spacing--sm:           var(--space-sm);
  --wp--preset--spacing--md:           var(--space-md);
  --wp--preset--spacing--lg:           var(--space-lg);
  --wp--preset--spacing--xl:           var(--space-xl);
  --wp--preset--spacing--xxl:          var(--space-xxl);

  --wp--preset--font-family--system:   var(--font-family);
}