/* eazyICON Unified Color System */

:root {
  /* Primary Accent - Purple */
  --accent: #764ba2;
  --accent-hover: #9b6bc7;
  --accent-muted: rgba(118, 75, 162, 0.1);
  --accent-text: #764ba2;
  
  /* Secondary Accent - Firefly Yellow */
  --accent-secondary: #dce233;
  --accent-secondary-hover: #e8ed5c;
  --accent-secondary-muted: rgba(220, 226, 51, 0.15);
  
  /* Backgrounds - Light Theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --bg-elevated: #ffffff;
  
  /* Text - Light Theme */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #6c757d;
  --text-light: #ffffff;
  
  /* Borders */
  --border: #dee2e6;
  --border-hover: #adb5bd;
  
  /* Charcoal Greys */
  --charcoal-100: #f5f5f5;
  --charcoal-200: #e0e0e0;
  --charcoal-300: #c0c0c0;
  --charcoal-400: #9e9e9e;
  --charcoal-500: #757575;
  --charcoal-600: #616161;
  --charcoal-700: #424242;
  --charcoal-800: #303030;
  --charcoal-900: #1a1a1a;
  
  /* Functional Colors */
  --success: #28a745;
  --error: #dc3545;
  --warning: #ffc107;
  --info: #17a2b8;
  
  /* Radius */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  
  /* Transitions */
  --tr: all 0.2s ease;
}

/* Dark Theme */
[data-theme="dark"] {
  /* Backgrounds - Dark Theme */
  --bg-primary: #0e1117;
  --bg-secondary: #1a1d24;
  --bg-tertiary: #252930;
  --bg-elevated: #1e2229;
  
  /* Text - Dark Theme */
  --text-primary: #e6edf3;
  --text-secondary: #c9d1d9;
  --text-muted: #8b949e;
  --text-dark: #1a1a1a;
  
  /* Borders - Dark Theme */
  --border: #30363d;
  --border-hover: #484f58;
  
  /* Accent adjustments for dark */
  --accent: #9b6bc7;
  --accent-hover: #b48fd4;
  --accent-muted: rgba(155, 107, 199, 0.15);
  
  /* Firefly yellow works well in dark too */
  --accent-secondary: #dce233;
  --accent-secondary-hover: #e8ed5c;
  --accent-secondary-muted: rgba(220, 226, 51, 0.2);
}

/* Usage Examples:
 * 
 * Primary action: background: var(--accent); color: white;
 * Secondary action: background: var(--accent-secondary); color: var(--charcoal-900);
 * Hover state: background: var(--accent-secondary-muted);
 * Badge/highlight: background: var(--accent-secondary); color: var(--charcoal-900);
 * Text link: color: var(--accent);
 * Subtle highlight: border-left: 3px solid var(--accent-secondary);
 */