/* Sabelis Design System, global entry point.
   Consumers link THIS file only. Import order = cascade order. */

@import url('./tokens/fonts.css');
@import url('./tokens/colors.css');
@import url('./tokens/typography.css');
@import url('./tokens/spacing.css');
@import url('./tokens/effects.css');
/* After effects (which no longer defines motion) and before base, so base's
   own rules and every component below can reference the duration tokens , 
   and so the reduced-motion guard inside it wins over anything they set. */
@import url('./tokens/motion.css');
@import url('./tokens/base.css');
@import url('./components/components.css');
/* LAST on purpose. These are responsive overrides of component styles, the
   16px mobile input floor has to beat `.fa-input { font-size: var(--text-base) }`,
   and at equal specificity that means loading after it. Imported before
   components it silently lost, and every field stayed at 14px: the exact size
   that makes iOS Safari zoom on focus.
   The layout utilities here use their own class names and so do not collide
   with anything in components.css. */
@import url('./tokens/breakpoints.css');
/* After breakpoints, because its @media print block has to beat the
   responsive layout rules too, a printed page is not a narrow viewport, and
   the report must not inherit mobile column stacking or hidden elements from
   whatever width the browser reports while printing. */
@import url('./components/report.css');
/* Playbook surfaces. After breakpoints for the same cascade reason as report. */
@import url('./components/playbooks.css');
@import url('./components/lessons.css');
@import url('./components/loading.css');
@import url('./components/auth.css');
@import url('./components/organization.css');
@import url('./components/dashboard-analytics.css');
@import url('./components/analytics.css');
@import url('./components/collections.css');