A CSS layer order declared once, at the top

Specificity conflicts resolved by declaring the order of every layer in one place, before anything is defined.

@layer reset, tokens, primitives, components, utilities;

/* everything after this point declares which layer it
   belongs to, and the order above wins regardless of
   file order, import order or specificity. */

@layer components {
  .card { padding: var(--space-m); }
}

@layer utilities {
  .p-0 { padding: 0; }   /* wins, at lower specificity */
}

A single-class utility beating a component rule without !important is the thing layers exist for, and it removes the specificity arms race that every stylesheet develops. The declaration must come first, which is the one rule — a layer used before it is named gets appended to the end of the order and the whole scheme inverts silently.