/* ===== SELF-HOSTED ICON SYSTEM ===== */
/* This replaces Font Awesome with custom CSS icons */

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    position: relative;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* ===== EMOJI-BASED ICONS (Default) ===== */
.icon-user::before {
    content: "👤";
    font-size: 0.9em;
}

.icon-blog::before {
    content: "📝";
    font-size: 0.9em;
}

.icon-code::before {
    content: "💻";
    font-size: 0.9em;
}

.icon-star::before {
    content: "⭐";
    font-size: 0.9em;
}

.icon-login::before {
    content: "🔐";
    font-size: 0.9em;
}

/* ===== SOCIAL MEDIA ICONS ===== */
.icon-linkedin::before {
    content: "💼";
    font-size: 1.1em;
}

.icon-github::before {
    content: "🐙";
    font-size: 1.1em;
}

.icon-twitter::before {
    content: "🐦";
    font-size: 1.1em;
}

/* ===== BLOG ICONS ===== */
.icon-send::before {
    content: "📤";
    font-size: 0.9em;
}

.icon-calendar::before {
    content: "📅";
    font-size: 0.9em;
}

.icon-arrow-right::before {
    content: "→";
    font-size: 0.9em;
    font-weight: bold;
}

.icon-newspaper::before {
    content: "📰";
    font-size: 1.2em;
}

.icon-edit::before {
    content: "✏️";
    font-size: 0.9em;
}

.icon-plus::before {
    content: "➕";
    font-size: 0.9em;
}

.icon-close::before {
    content: "❌";
    font-size: 0.9em;
}

.icon-upload::before {
    content: "📤";
    font-size: 0.9em;
}

.icon-image::before {
    content: "🖼️";
    font-size: 0.9em;
}

.icon-eye::before {
    content: "👁️";
    font-size: 0.9em;
}

.icon-heart::before {
    content: "❤️";
    font-size: 0.9em;
}

.icon-twitter::before {
    content: "🐦";
    font-size: 0.9em;
}

.icon-trash::before {
    content: "🗑️";
    font-size: 0.9em;
}

.icon-save::before {
    content: "💾";
    font-size: 0.9em;
}

.icon-arrow-left::before {
    content: "←";
    font-size: 0.9em;
    font-weight: bold;
}

.icon-search::before {
    content: "🔍";
    font-size: 0.9em;
}

.icon-warning::before {
    content: "⚠️";
    font-size: 0.9em;
}

/* ===== PURE CSS ICON ALTERNATIVES ===== */
/* Uncomment the section below and comment out the emoji section above for pure CSS icons */

/*
.icon-user::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.icon-user::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 6px;
    border: 2px solid currentColor;
    border-radius: 6px 6px 0 0;
    border-bottom: none;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.icon-blog::before {
    content: "";
    position: absolute;
    width: 12px;
    height: 10px;
    border: 2px solid currentColor;
    border-radius: 2px;
    top: 2px;
    left: 2px;
}

.icon-blog::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 2px;
    background: currentColor;
    top: 4px;
    left: 4px;
    box-shadow: 0 2px 0 currentColor, 0 4px 0 currentColor;
}

.icon-code::before {
    content: "</>";
    font-family: monospace;
    font-size: 0.8em;
    font-weight: bold;
}

.icon-star::before {
    content: "★";
    color: #fbbf24;
}

.icon-login::before {
    content: "🔑";
    font-size: 0.9em;
}

.icon-send::before {
    content: "➤";
    font-weight: bold;
    transform: rotate(90deg);
}

.icon-calendar::before {
    content: "📅";
    font-size: 0.9em;
}

.icon-arrow-right::before {
    content: "▶";
    font-size: 0.8em;
}

.icon-newspaper::before {
    content: "📄";
    font-size: 1.1em;
}
*/

/* ===== ICON SIZING UTILITIES ===== */
.icon-sm {
    font-size: 0.875em;
}

.icon-lg {
    font-size: 1.25em;
}

.icon-xl {
    font-size: 1.5em;
}

/* ===== ICON ANIMATIONS ===== */
.icon-spin {
    animation: icon-spin 2s linear infinite;
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.icon-pulse {
    animation: icon-pulse 1s ease-in-out infinite alternate;
}

@keyframes icon-pulse {
    from {
        opacity: 1;
    }

    to {
        opacity: 0.5;
    }
}

/* ===== ICON COLORS ===== */
.icon-primary {
    color: var(--primary);
}

.icon-secondary {
    color: var(--secondary);
}

.icon-accent {
    color: var(--accent);
}

.icon-highlight {
    color: var(--highlight);
}

.icon-success {
    color: var(--success);
}

.icon-warning {
    color: var(--warning);
}

.icon-error {
    color: var(--error);
}

/* ===== RESPONSIVE ICONS ===== */
@media (max-width: 768px) {
    .icon {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .icon {
        font-size: 0.8em;
    }
}