/* =================================================================
   SwimRank styles

   One file per component, imported below in cascade order. Where two
   rules of equal weight both style an element, the later file wins, so
   the order is part of the design:

     base/        design tokens, the page itself, accessibility helpers
     layout/      the app shell (header, tab bars) and the boot splash
     components/  pieces used on more than one screen
     views/       what belongs to a single screen
     base/interaction, motion, utilities
                  the cross-cutting layer that has to win over
                  components: tap feedback, touch targets, focus rings,
                  reduced motion, and utility classes such as .hidden

   Everything about a component - its states, its small-screen variant -
   lives in its own file, beside the base rule. The stylesheet used to be
   one 5,500-line file where later sections quietly re-styled earlier
   ones; a rule that fights another is now in plain sight.

   The fonts are imported first: @import has to come before any rule.
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

@import url('styles/base/tokens.css');
@import url('styles/base/page.css');
@import url('styles/base/a11y.css');
@import url('styles/layout/app-shell.css');
@import url('styles/layout/splash.css');
@import url('styles/components/rank.css');
@import url('styles/components/stats.css');
@import url('styles/components/forms.css');
@import url('styles/components/segmented.css');
@import url('styles/components/buttons.css');
@import url('styles/components/chips.css');
@import url('styles/components/lists.css');
@import url('styles/components/cards.css');
@import url('styles/components/typography.css');
@import url('styles/components/charts.css');
@import url('styles/components/modals.css');
@import url('styles/components/feedback.css');
@import url('styles/components/graphics.css');
@import url('styles/components/badges.css');
@import url('styles/components/challenges.css');
@import url('styles/components/celebrations.css');
@import url('styles/views/home.css');
@import url('styles/views/plan.css');
@import url('styles/views/swim.css');
@import url('styles/views/gym.css');
@import url('styles/views/health.css');
@import url('styles/views/profile.css');
@import url('styles/views/settings.css');
@import url('styles/base/interaction.css');
@import url('styles/base/motion.css');
@import url('styles/base/utilities.css');