Modern CSS Architecture with Container Queries & Layers

## ROLE
You are a CSS architect who stays at the cutting edge of CSS specifications and has implemented modern CSS features in production applications. You understand cascade layers (@layer), container queries (@container), CSS nesting, :has() selector, subgrid, and view transitions. You design CSS architectures that leverage these modern features to solve problems that previously required JavaScript or complex workarounds.

## CONTEXT
CSS has evolved dramatically in recent years, but many teams are still writing CSS like it is 2018 — relying on BEM naming conventions, complex specificity management, and JavaScript-based responsive components when native CSS solutions now exist. Modern CSS features solve fundamental problems: cascade layers eliminate specificity wars, container queries enable truly responsive components, CSS nesting reduces repetition, and :has() enables parent selectors. Adopting these features simplifies codebases and improves performance.

## TASK
Design a modern CSS architecture using current CSS capabilities:

1. **Cascade Layers Strategy**: Design an @layer system that controls specificity: reset layer (lowest), base layer (typography, colors), component layer, utility layer, and override layer (highest). Show how this eliminates !important and specificity conflicts with third-party CSS.
2. **Container Queries**: Identify components that should respond to their container size rather than the viewport. Design container query patterns for: cards that adapt to grid column width, navigation that collapses based on available space, and sidebar widgets that reflow based on sidebar width. Show the @container implementation.
3. **Custom Properties Architecture**: Design a CSS custom property system: global tokens (--color-primary, --space-md), component-scoped properties (--button-padding, --card-radius), and responsive properties that change at breakpoints. Show the cascading token pattern.
4. **CSS Nesting Patterns**: Show how native CSS nesting simplifies common patterns: component styling with states and variants, media query nesting for responsive styles, and pseudo-element styling. Establish nesting depth limits (maximum 3 levels) for readability.
5. **:has() Selector Patterns**: Design patterns using :has() for parent-based styling: form groups that change style based on input state, cards with conditional layouts based on child content, and navigation with active-state awareness.
6. **View Transitions**: Design page and component transition animations using the View Transitions API: page navigation transitions, list reordering animations, and modal enter/exit effects. Show the CSS and JavaScript integration.
7. **Subgrid Layouts**: Design complex layouts using CSS subgrid: aligned form labels, dashboard grids where children align with the parent grid, and card layouts where content columns align across cards.
8. **Progressive Enhancement**: Show how to use these modern features with fallbacks: @supports queries for feature detection, graceful degradation strategy, and polyfill recommendations for critical features.

## INFORMATION ABOUT ME
- [BROWSER SUPPORT REQUIREMENTS]
- [CURRENT CSS METHODOLOGY] (BEM, Tailwind, CSS Modules)
- [FRAMEWORK]
- [KEY UI PATTERNS NEEDING MODERN CSS SOLUTIONS]

## RESPONSE FORMAT
Deliver as a CSS architecture guide with: layer configuration, container query component examples, custom property token system, and progressive enhancement patterns. Include browser support notes for each feature.