/* ============================================================
   Cascade layer order — declared once, first, and never again.
   Later layers win over earlier layers, regardless of file
   load order or selector specificity.

   Organising principle:
   Syncfusion's library CSS (loaded into `vendor.syncfusion`)
   is AUTHORITATIVE for Syncfusion-rendered controls. Our
   "background" layers (reset, tokens, base, layouts,
   components) live BELOW vendor so none of them accidentally
   clobber Syncfusion styling on Syncfusion controls.
   Explicit overrides — utilities (opt-in per element) and
   brand (intentional visual changes) — sit ABOVE vendor so
   they can deliberately override Syncfusion where wanted.

   legacy    — legacy app-*.css files (RCL + host), wrapped so
               newer layered rules override them cleanly.
   reset     — element-level normalize / reset rules. Sits
               below vendor so it never strips Syncfusion.
   tokens    — primitive + semantic variable declarations.
   base      — element-level defaults that consume tokens.
   layouts   — page scaffolding / containers.
   components — class-scoped, state-bearing patterns.
   vendor    — third-party CSS (Syncfusion via the
               `vendor.syncfusion` sub-layer, and any others).
   utilities — single-purpose classes. Opt-in per element, so
               when an author adds `u-p-4` to a Syncfusion
               button the intent is explicit override.
   brand     — host overrides (reserved for consuming apps).
               Intentional visual changes on top of vendor.
   syncfusion — reserved / vestigial; kept in the declaration
               so any rule using @layer syncfusion lands at
               highest priority rather than at an unknown
               position determined by order-of-first-use.
   ============================================================ */

@layer legacy, reset, tokens, base, layouts, components, vendor, utilities, brand, syncfusion;