/* 现代图标系统 - 使用 Unicode 字符和 CSS 符号 */

/* 基础图标样式 */
.icon {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    font-size: 16px;
    vertical-align: middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 基础图标 - 使用 Unicode 字符 */
.icon-home:before { content: "🏠"; }
.icon-search:before { content: "🔍"; }
.icon-menu:before { content: "☰"; }
.icon-close:before { content: "✕"; }
.icon-arrow-up:before { content: "↑"; }
.icon-arrow-down:before { content: "↓"; }
.icon-arrow-left:before { content: "←"; }
.icon-arrow-right:before { content: "→"; }
.icon-chevron-up:before { content: "⌃"; }
.icon-chevron-down:before { content: "⌄"; }
.icon-chevron-left:before { content: "‹"; }
.icon-chevron-right:before { content: "›"; }

/* 文件和文档图标 */
.icon-file:before { content: "📄"; }
.icon-file-text:before { content: "📝"; }
.icon-folder:before { content: "📁"; }
.icon-folder-open:before { content: "📂"; }
.icon-document:before { content: "📋"; }
.icon-edit:before { content: "✏️"; }
.icon-copy:before { content: "📋"; }
.icon-download:before { content: "⬇️"; }
.icon-upload:before { content: "⬆️"; }

/* 社交媒体图标 */
.icon-github:before { content: "⚡"; }
.icon-twitter:before { content: "🐦"; }
.icon-facebook:before { content: "📘"; }
.icon-instagram:before { content: "📷"; }
.icon-linkedin:before { content: "💼"; }
.icon-youtube:before { content: "📺"; }
.icon-weibo:before { content: "🌐"; }
.icon-wechat:before { content: "💬"; }
.icon-qq:before { content: "🐧"; }
.icon-email:before { content: "✉️"; }

/* 功能图标 */
.icon-heart:before { content: "♡"; }
.icon-heart-filled:before { content: "♥"; }
.icon-star:before { content: "☆"; }
.icon-star-filled:before { content: "★"; }
.icon-bookmark:before { content: "🔖"; }
.icon-bookmark-filled:before { content: "📌"; }
.icon-share:before { content: "📤"; }
.icon-link:before { content: "🔗"; }
.icon-external-link:before { content: "↗"; }
.icon-print:before { content: "🖨️"; }

/* 多媒体图标 */
.icon-image:before { content: "🖼️"; }
.icon-video:before { content: "🎬"; }
.icon-audio:before { content: "🎵"; }
.icon-play:before { content: "▶"; }
.icon-pause:before { content: "⏸"; }
.icon-stop:before { content: "⏹"; }
.icon-volume:before { content: "🔊"; }
.icon-volume-mute:before { content: "🔇"; }

/* 界面图标 */
.icon-settings:before { content: "⚙️"; }
.icon-user:before { content: "👤"; }
.icon-users:before { content: "👥"; }
.icon-lock:before { content: "🔒"; }
.icon-unlock:before { content: "🔓"; }
.icon-eye:before { content: "👁"; }
.icon-eye-off:before { content: "🙈"; }
.icon-bell:before { content: "🔔"; }
.icon-bell-off:before { content: "🔕"; }

/* 状态图标 */
.icon-check:before { content: "✓"; }
.icon-check-circle:before { content: "✅"; }
.icon-x:before { content: "✗"; }
.icon-x-circle:before { content: "❌"; }
.icon-alert-circle:before { content: "⚠️"; }
.icon-alert-triangle:before { content: "⚠"; }
.icon-info:before { content: "ℹ️"; }
.icon-help:before { content: "❓"; }

/* 时间和日期图标 */
.icon-clock:before { content: "🕐"; }
.icon-calendar:before { content: "📅"; }
.icon-time:before { content: "⏰"; }
.icon-date:before { content: "📆"; }

/* 通信图标 */
.icon-message:before { content: "💬"; }
.icon-message-circle:before { content: "💭"; }
.icon-message-square:before { content: "📨"; }
.icon-mail:before { content: "📧"; }
.icon-phone:before { content: "📞"; }

/* 导航图标 */
.icon-map:before { content: "🗺️"; }
.icon-map-pin:before { content: "📍"; }
.icon-navigation:before { content: "🧭"; }
.icon-compass:before { content: "🧭"; }

/* 工具图标 */
.icon-tool:before { content: "🔧"; }
.icon-wrench:before { content: "🔧"; }
.icon-hammer:before { content: "🔨"; }
.icon-scissors:before { content: "✂️"; }

/* 主题相关图标 */
.icon-sun:before { content: "☀️"; }
.icon-moon:before { content: "🌙"; }
.icon-contrast:before { content: "🌗"; }
.icon-palette:before { content: "🎨"; }

/* 代码相关图标 */
.icon-code:before { content: "💻"; }
.icon-terminal:before { content: "⌨️"; }
.icon-git:before { content: "🌿"; }
.icon-branch:before { content: "🌲"; }

/* 标签相关图标 */
.icon-tag:before { content: "#"; }
.icon-tags:before { content: "🏷️"; }
.icon-category:before { content: "📂"; }
.icon-archive:before { content: "📦"; }

/* 图标大小变体 */
.icon-xs { font-size: 12px; }
.icon-sm { font-size: 14px; }
.icon-md { font-size: 16px; }
.icon-lg { font-size: 18px; }
.icon-xl { font-size: 20px; }
.icon-2xl { font-size: 24px; }
.icon-3xl { font-size: 32px; }

/* 图标颜色变体 */
.icon-primary { color: var(--primary-color, #007bff); }
.icon-secondary { color: var(--secondary-color, #6c757d); }
.icon-success { color: var(--success-color, #28a745); }
.icon-danger { color: var(--danger-color, #dc3545); }
.icon-warning { color: var(--warning-color, #ffc107); }
.icon-info { color: var(--info-color, #17a2b8); }
.icon-light { color: var(--light-color, #f8f9fa); }
.icon-dark { color: var(--dark-color, #343a40); }
.icon-muted { color: var(--muted-color, #6c757d); }

/* 图标动画 */
.icon-spin {
    animation: icon-spin 2s infinite linear;
}

.icon-pulse {
    animation: icon-pulse 2s infinite;
}

.icon-bounce {
    animation: icon-bounce 1s infinite;
}

/* 动画关键帧 */
@keyframes icon-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes icon-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes icon-bounce {
    0%, 20%, 53%, 80%, 100% {
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transform: translate3d(0,0,0);
    }
    40%, 43% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0,-4px,0);
    }
}

/* 响应式图标 */
@media (max-width: 768px) {
    .icon {
        font-size: 14px;
    }
    
    .icon-xs { font-size: 10px; }
    .icon-sm { font-size: 12px; }
    .icon-md { font-size: 14px; }
    .icon-lg { font-size: 16px; }
    .icon-xl { font-size: 18px; }
    .icon-2xl { font-size: 20px; }
    .icon-3xl { font-size: 24px; }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    .icon-spin,
    .icon-pulse,
    .icon-bounce {
        animation: none !important;
    }
}

/* 打印样式 */
@media print {
    .icon {
        color: #000 !important;
    }
    
    .icon-spin,
    .icon-pulse,
    .icon-bounce {
        animation: none !important;
    }
}