phase 4

frontend/src/styles/igny8-colors.css

@@ -1,22 +1,26 @@
 /* ===================================================================
-   IGNY8 CUSTOM COLOR SCHEME
+   IGNY8 UTILITY CLASSES & LEGACY SUPPORT
    ===================================================================
-   This file contains IGNY8 brand colors from WordPress plugin.
-   All classes use 'igny8-' prefix to avoid conflicts with TailAdmin defaults.
-   Import this file separately to keep TailAdmin updates from affecting it.
+   ⚠️  DEPRECATED: This file is maintained for backward compatibility.
+   New code should use:
+   - CSS variables: var(--color-primary), var(--color-success), etc.
+   - Tailwind utilities: bg-brand-500, text-brand-500, etc.
+   - React components: Button, Badge, Card from /components/ui/
    
    🔒 DESIGN SYSTEM LOCKED - See DESIGN_SYSTEM.md for complete style guide
    
-   IMPORTANT: Before adding new CSS classes, check DESIGN_SYSTEM.md to ensure
-   you're not duplicating existing functionality. All visual styling patterns
-   are documented and locked.
+   This file provides:
+   1. Legacy variable aliases (--igny8-* → --color-*)
+   2. Active utility classes (.igny8-table-*, .igny8-header-metric-*)
+   3. Deprecated utility classes (marked below - do not use in new code)
    =================================================================== */
 
 /* === CSS CUSTOM PROPERTIES (Variables) === */
 /* Import tokens from centralized tokens.css */
 @import "./tokens.css";
 
-/* Legacy variable aliases for backward compatibility during migration */
+/* Legacy variable aliases for backward compatibility */
+/* These allow old code using --igny8-* to continue working */
 :root {
   --igny8-blue: var(--color-primary);
   --igny8-blue-dark: var(--color-primary-dark);
@@ -47,13 +51,18 @@
 }
 
 /* ===================================================================
-   IGNY8 UTILITY CLASSES
+   DEPRECATED UTILITY CLASSES
    ===================================================================
-   Use these classes instead of Tailwind defaults for IGNY8 branding.
-   Example: Use 'igny8-bg-blue' instead of 'bg-brand-500'
+   ⚠️  DO NOT USE IN NEW CODE
+   These classes are deprecated. Use Tailwind utilities or React components instead:
+   - .igny8-bg-blue → bg-brand-500 or bg-[var(--color-primary)]
+   - .igny8-text-blue → text-brand-500 or text-[var(--color-primary)]
+   - .igny8-border-blue → border-brand-500 or border-[var(--color-primary)]
+   
+   Migration: Replace with Tailwind utilities or use Button/Badge/Card components.
    =================================================================== */
 
-/* === Background Colors === */
+/* === Background Colors (DEPRECATED) === */
 .igny8-bg-blue { background-color: var(--igny8-blue); }
 .igny8-bg-blue-dark { background-color: var(--igny8-blue-dark); }
 .igny8-bg-green { background-color: var(--igny8-green); }