/* styles.css (located in your project's root directory) */

/*
   Main Stylesheet Entry Point

   This file serves as the central hub for all other modular CSS files.
   It uses `@import` rules to bring in styles for variables, base elements,
   typography, layout, reusable components, and page-specific designs.
   Only this file needs to be linked in your HTML documents.
*/

/* Import variables first as they are needed everywhere by other files */
@import url('./css/_variables.css');

/* Base styles and global resets for foundational elements */
@import url('./css/_base.css');
/* Specific typography rules for headings and paragraphs */
@import url('./css/_typography.css');

/* Layout styles for the overall structure (header, navigation, main content, footer) */
@import url('./css/_layout.css');

/* Reusable UI components (buttons, cards, lists used across pages) */
@import url('./css/_components.css');

/* Utility classes for small, single-purpose styles */
@import url('./css/_utilities.css');

/* Styles unique to specific pages or large distinct sections */
@import url('./css/_pages.css');