docs: restore comprehensive CSS architecture documentation

[christoph2806]

Restore Comprehensive CSS Architecture Documentation

Overview

This PR restores the comprehensive CSS architecture documentation that was accidentally removed in a previous commit. The documentation is crucial for maintaining consistency and understanding of our CSS architecture.

Changes

Documentation Restoration

• Restored css-architecture.md with detailed documentation about:
  • Three-layer CSS architecture
  • File structure and responsibilities
  • CSS cascade flow
  • Variable naming strategy
  • Conflict prevention rules
  • Testing strategy
  • Common pitfalls and solutions
  • Debugging techniques
  • Maintenance checklist

CSS File Updates

• Restored comment blocks in:
  • theme.css: Documentation of its role as the dynamic bridge between DaisyUI and Shadcn
  • globals.css: Documentation of its role as the foundation and safety net

Technical Details

CSS Architecture Layers

1. Foundation Layer (globals.css)

   • Sets up Tailwind CSS
   • Defines static fallback values
   • Establishes base CSS variables

2. Theme Layer (theme.css)

   • Maps DaisyUI variables to Shadcn names
   • Handles light/dark mode switching
   • Provides dynamic theme values

3. Component Layer

   • Uses variables from both layers
   • Implements component-specific styles
   • Maintains consistent theming

Variable Naming Strategy

• Clear hierarchy in variable names
• Consistent prefixing for different types
• Proper fallback values for each variable

Impact

This restoration ensures:

• Clear understanding of our CSS architecture
• Consistent variable naming and usage
• Proper documentation of the three-layer system
• Better maintainability for future developers

Testing

• Documentation is properly formatted
• All CSS files maintain their original functionality
• No breaking changes to the existing CSS architecture
• Variable naming conventions are consistent
• Fallback values are properly documented

Related Issues

• Fixes the documentation gap created by the removal of CSS architecture docs
• Ensures proper maintenance of the theming system
• Improves developer onboarding experience

Checklist

• Documentation restored
• CSS files updated with proper comments
• No functional changes to CSS
• All tests passing
• Documentation reviewed for accuracy