/* The one stylesheet a page links.
 *
 * ⚠ THE ORDER IS THE ORDER THE NEXT APP LOADS THEM IN, and it is load-bearing. Tokens define the
 * custom properties everything else reads; a component stylesheet that arrives before them resolves
 * `var(--purple-400)` to nothing, and an undefined custom property does not fall back — it deletes
 * the whole declaration. That failure is silent and looks like a missing style rather than a
 * missing variable.
 *
 * ⚠ AND THESE ARE THE SAME FILES, COPIED, not a rewrite. The design system was already plain CSS
 * with no framework in it — `packages/ds` imports `next` in zero files — so porting it was a copy.
 * Anything that turns out to be wrong here is wrong in both places.
 */

@import url("./tokens/fonts.css");
@import url("./tokens/colors.css");
@import url("./tokens/typography.css");
@import url("./tokens/spacing.css");
@import url("./tokens/radii.css");
@import url("./tokens/effects.css");
@import url("./tokens/motion.css");
@import url("./tokens/layout.css");
@import url("./tokens/base.css");

@import url("./parts/shared.css");
@import url("./parts/bits.css");
@import url("./parts/button.css");
@import url("./parts/card.css");
@import url("./parts/field.css");
@import url("./parts/controls.css");
@import url("./parts/chrome.css");
@import url("./parts/scene.css");

@import url("./parts/globals.css");
@import url("./parts/nav.css");

/* Each page has its own stylesheet and its own namespace — `hm2-*` is the home page's and nothing
   else uses it, `sol-*` is the Solutions pages'. Pages added later bring theirs the same way.
   ⚠ These are LAST because a page stylesheet is allowed to override a component; the reverse is
   not true, and swapping the order would let a shared component quietly win over a page's own rule. */
@import url("./parts/home.css");

/* ⚠ ABOUT AND SERVICES BEFORE SOLUTIONS, IN THAT ORDER, because that is the order the sector page
   imports them and the three overlap. `about-h2`, `about-sechead` and `about-cta` are defined in
   about.css and refined in services.css; `sv-break` — the animated separator between sections —
   lives in services.css and is aliased by solutions.css, which sets `--sv-gap: var(--sol-gap)` so
   the break absorbs the page's own grid gap.
   ⚠ AND WITHOUT THESE TWO FILES THE SEPARATOR IS INVISIBLE RATHER THAN BROKEN. The markup renders,
   so nothing errors; it just has no rule, no travelling sweep and no centring, and reads as a bare
   rotating form floating in a gap. That is what was wrong with it. */
@import url("./parts/about.css");
/* ⚠ PRICING AND PROJECTS SIT BETWEEN ABOUT AND SERVICES because that is where the two projects
   pages put them: the index imports about, projects, services; the detail page imports about,
   pricing, projects, services. The detail page borrows `pricing.css` for the spec rail it shares
   with the pricing table — it is not dead weight here.
   ⚠ Verified before moving them: no two page stylesheets in this site declare the same selector,
   so this order changes nothing that already renders. Check that again before adding the next one
   rather than assuming it stays true. */
@import url("./parts/pricing.css");
@import url("./parts/projects.css");
@import url("./parts/services.css");
@import url("./parts/solutions.css");

/* ⚠ THE ARCHIVE'S OWN SHEET, AND ITS ABSENCE IS INVISIBLE IN A DOM DIFF. Every blog page imports
   this in the other app; without it the markup here matched node for node and the page was 1,500px
   taller, because `bl-body`, `bl-hero` and every block class had no rule at all. That is the exact
   failure the second proof exists to catch — a tree diff compares markup and is silent when a
   stylesheet is missing. Checked before adding: it collides with nothing already in this file. */
@import url("./parts/blog.css");

/* ⚠ THREE SHEETS WERE MISSING AT ONCE — blog, calculator and contact — and every one of those pages
   still passed a DOM diff node for node while rendering hundreds of pixels wrong. That is the whole
   argument for the second proof: a tree diff compares markup and says nothing at all about whether
   a stylesheet arrived. When a page is added, add its sheet HERE and then measure the page, or the
   diff will tell you it is finished and it will not be.
   ⚠ AND CHECK FOR COLLISIONS FIRST. Almost no two page stylesheets on this site declare the same
   selector, which is why their order rarely matters — but `.contact-main` IS declared twice, in
   globals.css and again in contact.css. The other app loads globals from the layout and contact
   from the page, so contact wins; contact.css is therefore last here too. Verify that this still
   holds when adding a sheet rather than assuming it. */
@import url("./parts/calculator.css");
@import url("./parts/contact.css");

/* ⚠ THE ONE SHEET HERE WITH NO COUNTERPART IN THE OTHER APP. The policy pages were told to follow
   best practice whether or not that app does, so they gained a dated "last updated" line and links
   between the three; this styles those two and nothing else. New class names only — checked against
   every selector already loaded above, so its position in this list does not matter. */
@import url("./parts/legal.css");