/* ======================
   MATBITER STYLES
   Main import file
   ====================== */

/* Import all modular stylesheets */
@import url("base.c73e52a0fab6.css");
@import url("layout.2d4bc0dc303b.css");
@import url("header.8e83f24fba7b.css");
@import url("cards.25c37309bff7.css");
@import url("forms.f35463574701.css");
@import url("filters.00b5819cc7b3.css");
@import url("ingredients.cdbe81392ed6.css");
@import url("nutrition.99e6e37b3541.css");
@import url("steps.fb3a9953140d.css");
@import url("components.c33d54c2b0bf.css");
@import url("modals.eef1f7524cb0.css");
@import url("variant-selectors.dbeac4ad8928.css");
@import url("components/_variants.9bb21e9b7366.css");
@import url("components/_inheritance.aab631cc726e.css");
@import url("components/_empty-states.c2295c10692d.css");
@import url("components/_skeleton.a8fcb6dd2d00.css");
@import url("components/_animations.7586369f8390.css");
@import url("utilities.f66d606fcafd.css");
@import url("builder.47af0d501c26.css");
@import url("timeline.cbdf02acfefe.css");
@import url("ratings.a1e1c174bca2.css");
@import url("guides.971d2559cb59.css");

/*
  ORGANIZATION:
  
  base.css       - CSS variables, resets, typography, animations
  layout.css     - Page structure, grids, hero, layout containers
  header.css     - Site header, navigation, search, mobile menu
  cards.css      - All card types, carousels, badges, images
  forms.css      - Inputs, buttons, selects, checkboxes, servings controls
  filters.css    - Filter sidebar, topbar, chips, facets, category dropdowns
  components.css - Ingredients, nutrition, notes, steps, pairings, modals
  utilities.css  - Tags, dark mode overrides, helper classes
  builder.css    - Recipe builder specific styles, wizard, generated recipe
  ingredients.css- Ingredient detail page, nutrition facts, related recipes
  timeline.css   - Timeline view for merged recipes
  nutrition.css  - Nutrition facts blocks, grids, labels
  steps.css      - Recipe steps, timers, step navigation
  

  STANDARDIZED:
  
  - Border radius: --border-radius-sm (8px), -md (12px), -lg (16px), -pill (999px)
  - Control heights: --control-height (2.8rem), --control-height-sm (2.2rem)
  - All selects now use consistent styling
  - Checkbox alignment standardized across ingredients and filters
  
  BREAKPOINTS USED:
  
  - 400px  - Very small screens (filter sidebar full width)
  - 600px  - Mobile (2-col cards, tag dropdown, compact UI)
  - 640px  - Small tablets (nutrition grid 2-col, larger touch targets)
  - 700px  - Tablets (header adjustments)
  - 900px  - Desktop threshold (hide mobile nav, show desktop nav)
  - 1000px - Large screens (3-col card grid)
  - 1023px - Filter mobile breakpoint
  - 1024px - Filter desktop breakpoint (sidebar layout)
*/