/**
 * Matrix Design System - Color Tokens
 * Enterprise-grade color palette for cyberpunk/terminal aesthetics
 */

@layer base {
  :root {
    /* Primary Matrix Colors */
    --matrix-black: #000000;
    --matrix-green: #00ff41;
    --matrix-white: #ffffff;
    
    /* Matrix Green Variations */
    --matrix-green-50: #f0fff4;
    --matrix-green-100: #dcfce7;
    --matrix-green-200: #bbf7d0;
    --matrix-green-300: #86efac;
    --matrix-green-400: #4ade80;
    --matrix-green-500: #00ff41;
    --matrix-green-600: #16a34a;
    --matrix-green-700: #15803d;
    --matrix-green-800: #166534;
    --matrix-green-900: #14532d;
    
    /* Matrix Grayscale */
    --matrix-gray-50: #fafafa;
    --matrix-gray-100: #f5f5f5;
    --matrix-gray-200: #e5e5e5;
    --matrix-gray-300: #d4d4d4;
    --matrix-gray-400: #a3a3a3;
    --matrix-gray-500: #737373;
    --matrix-gray-600: #525252;
    --matrix-gray-700: #404040;
    --matrix-gray-800: #1a1a1a;
    --matrix-gray-900: #0d0d0d;
    
    /* Glow Effects */
    --matrix-glow-primary: #00ff41;
    --matrix-glow-secondary: #33ff77;
    --matrix-glow-accent: #66ff99;
    
    /* Status Colors (Matrix-themed) */
    --matrix-success: #00ff41;
    --matrix-warning: #ffff00;
    --matrix-error: #ff0040;
    --matrix-info: #00ffff;
    
    /* Background Variations */
    --matrix-bg-primary: #000000;
    --matrix-bg-secondary: #0d0d0d;
    --matrix-bg-tertiary: #1a1a1a;
    --matrix-bg-hover: rgba(0, 255, 65, 0.1);
    --matrix-bg-active: rgba(0, 255, 65, 0.2);
    
    /* Border Colors */
    --matrix-border-primary: #00ff41;
    --matrix-border-secondary: rgba(0, 255, 65, 0.3);
    --matrix-border-subtle: rgba(0, 255, 65, 0.1);
    
    /* Text Colors */
    --matrix-text-primary: #00ff41;
    --matrix-text-secondary: rgba(0, 255, 65, 0.8);
    --matrix-text-muted: rgba(0, 255, 65, 0.6);
    --matrix-text-disabled: rgba(0, 255, 65, 0.4);
    --matrix-text-inverse: #000000;
    
    /* Shadow Colors */
    --matrix-shadow-glow: 0 0 10px var(--matrix-green);
    --matrix-shadow-glow-lg: 0 0 20px var(--matrix-green);
    --matrix-shadow-glow-xl: 0 0 30px var(--matrix-green);
    --matrix-shadow-subtle: 0 0 5px rgba(0, 255, 65, 0.3);
  }
}