/*
 * Design system entry point.
 *
 * Orden de cascada explícito (más débil → más fuerte):
 *   reset → tokens → base → layout → components → utilities.
 *
 * Cualquier override ad-hoc (utilities o inline) gana sin specificity hacks.
 */

@layer reset, tokens, base, layout, components, utilities;

@import url("./reset.css") layer(reset);
@import url("./tokens.css") layer(tokens);
@import url("./base.css") layer(base);
@import url("./layout.css") layer(layout);
@import url("./components.css") layer(components);

/* =========================================================================
   Layer overrides (unlayered, ganan a cualquier @layer).
   ========================================================================= */

/* `.item-list` y similares en components.css declaran `margin: 0`, lo
   cual gana sobre `.stack > * + *` (layout layer) por orden de capas.
   Estas reglas unlayered restauran el spacing del stack para que
   cualquier página que mezcle stack--loose + item-list / filters /
   tx-type-tabs respete el gap visual. Antes vivía como `<style>` inline
   en transactions/list.html — movido acá para no duplicar. */
.stack--loose > .item-list,
.stack--loose > .filters,
.stack--loose > .tx-type-tabs {
  margin-block-start: var(--space-6);
}

.stack--loose > .item-list:first-child,
.stack--loose > .filters:first-child,
.stack--loose > .tx-type-tabs:first-child {
  margin-block-start: 0;
}

/* Defense-in-depth: garantizar aire bajo el .page-header sin depender
   de overrides del próximo elemento. Si una página no tiene .item-list
   inmediatamente debajo, el .stack rule sigue gobernando con el gap
   del padre. */
.page-header {
  margin-block-end: var(--space-2);
}