/* ===========================================================================
   vedika-theme.css — THE ENTRY POINT
   ---------------------------------------------------------------------------
   This is the only stylesheet a page needs to link. It declares the cascade
   order once, structurally, for all 29,861 pages, and pulls every legacy
   stylesheet underneath the design system so the system wins without a single
   `!important`.

   THE ONE LINE THAT MATTERS
   -------------------------
   `@layer legacy, vds.tokens, vds.base, vds.components, vds.utilities,
    vds.motion, vds.overrides;`

   Layer order is established by FIRST APPEARANCE, which is why that line is at
   the very top and must stay there. Later layers beat earlier ones REGARDLESS
   OF SPECIFICITY. Verified in Chromium: `.vds-pill` (specificity 0,1,0) in
   vds.components beats `#page .sidebar .bg-red-500` (specificity 1,2,0) in
   legacy. That is the entire architecture in one sentence.

   WHY THIS BEATS !important
   -------------------------
   `!important` is a per-rule fight you have to win 4,000 times and can never
   stop having. A layer is declared once and is then true for every rule in it,
   forever, including rules nobody has written yet. It also stays debuggable —
   DevTools shows which layer won.

   THE ONE EXCEPTION, and it is safe
   ---------------------------------
   `!important` inverts layer order: an important declaration in a LOWER layer
   beats a normal one in a higher layer. So legacy `!important` rules still
   win. There are exactly 10 in css/tailwind.min.css and they are all container
   and prose layout:
     width:100%!important · max-width:{640,768,1024,1280,1536}px!important
     margin:0!important · margin-top:0!important
     border-top-{left,right}-radius:0!important
   None of them touches colour, shadow, type or any system component. Measured,
   not assumed. If that count ever changes, tools/check-tokens.mjs reports it.

   IMPORT ORDER vs LAYER ORDER
   ---------------------------
   These are independent. The @layer statement above fixes precedence; the
   @import order below only fixes load order. Legacy is imported first because
   it is the largest file and should start downloading first, not because it
   needs to be first for the cascade.

   PRODUCTION NOTE — FLATTEN BEFORE SHIPPING
   -----------------------------------------
   @import creates a request waterfall: the browser cannot discover
   vedika-tokens.css until vedika-theme.css has parsed. On 29,861 SEO pages
   that is a real LCP cost. This authoring form is correct; the SHIPPING form
   is a single concatenated file at this same path, in this same layer order.
   `node tools/vds-rollout.mjs --flatten` produces it. Never ship the waterfall.
   =========================================================================== */

@layer legacy, vds.tokens, vds.base, vds.components, vds.utilities, vds.motion, vds.overrides;

/* --- everything that existed before the system, demoted as a group --------
   Adding a stylesheet to this list is what converts it from "can override the
   system arbitrarily" to "is overridden by the system". That is the whole
   mechanism by which drift stops. See the per-file disposition table in
   DESIGN-SYSTEM.md before adding one. */
@import url("/css/tailwind.min.css") layer(legacy);

/* --- the system ---------------------------------------------------------- */
@import url("/css/vedika-tokens.css");   /* self-declares @layer vds.tokens  */
@import url("/css/vedika-ds.css");       /* self-declares its own layers     */

/* ---------------------------------------------------------------------------
   vds.overrides — the escape hatch, deliberately left empty.

   A page that genuinely needs to deviate writes into this layer rather than
   raising specificity or reaching for !important:

     @layer vds.overrides { .my-page .vds-pill { --vds-bloom-alpha: 0.3; } }

   Anything in here is a debt. It should be a token override, it should carry a
   comment saying why, and it should be reviewed. If two pages need the same
   override, it is not an override — it belongs in the system.
   --------------------------------------------------------------------------- */