/**
 * Hello Middleton - CSS Cascade Layers
 * Defines layer order for clean specificity management
 *
 * Layers are processed in declaration order - later layers win.
 * This eliminates the need for !important in most cases.
 *
 * @version 2.2.0
 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
 */

/* =========================================================================
   LAYER ORDER DECLARATION
   Lower in list = higher specificity
   ========================================================================= */

@layer reset, base, plugins, theme, components, utilities;

/*
 * Layer Purposes:
 *
 * 1. reset      - CSS resets, normalize styles
 * 2. base       - Default element styles (typography, links, etc.)
 * 3. plugins    - Third-party plugin styles (BuddyPress, Events, etc.)
 * 4. theme      - Core theme styles, design system
 * 5. components - Component-specific styles (cards, buttons, forms)
 * 6. utilities  - Utility classes (!important allowed here)
 *
 * Usage in CSS files:
 *
 * @layer plugins {
 *     .buddypress .activity-item {
 *         padding: var(--space-3);
 *     }
 * }
 *
 * @layer components {
 *     .hm-card {
 *         border-radius: var(--radius-lg);
 *     }
 * }
 *
 * Benefits:
 * - No more !important wars with plugins
 * - Predictable cascade regardless of source order
 * - Easy to override plugin styles without specificity hacks
 */