/* BREAKPOINTS — ranges, not frames. CSS can't use var() inside a media query,
   so these tokens exist for handoff (Tailwind screens / JS matchMedia) and the
   stylesheets repeat the literal px. Keep the two in sync.

   name      range            design at   columns  margin  gutter
   mobile    360 – 599px      375         4        16      16
   mobile-lg 600 – 767px      640         4        24      16
   tablet    768 – 1023px     768         8        24      24
   laptop    1024 – 1439px    1280        12       40      24
   desktop   1440px +         1440        12       64      24   (content caps 1200)

   Below 360px the layout keeps working down to 320px — it does not get its own
   breakpoint, it just stays fluid and nothing is allowed to set a fixed width. */
:root{
--bp-mobile:360px;
--bp-mobile-lg:600px;
--bp-tablet:768px;
--bp-laptop:1024px;
--bp-desktop:1440px;

/* Reference frames used in the responsive specimen cards. */
--frame-mobile:375px;
--frame-tablet:768px;
--frame-desktop:1440px;

/* Hard floor the layout must survive with no horizontal scroll. */
--viewport-min:320px;
}