SCSS architecture guidelines covering file organization, variables, mixins, and maintainable stylesheet patterns.

• Implements the 7-1 pattern for scalable folder structure: abstracts, base, components, layout, pages, themes, and vendors with a clear import order
• Provides semantic variable naming conventions for colors, typography, spacing, breakpoints, z-index, transitions, and shadows using maps for grouped values
• Includes reusable mixins for responsive breakpoints, flexbox utilities, typography, and accessibility patterns like visually-hidden and focus-visible
• Enforces BEM naming convention with block, element, and modifier structure; limits nesting to 3 levels maximum to prevent specificity bloat
• Covers functions for color manipulation (tint/shade), unit conversion (px-to-rem), and utility generation via loops; recommends placeholders over @extend and modern @use modules over deprecated @import