/* ============================
   ICONS — BRUTALIST
   ============================ */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 24px; height: 24px; }
.icon-lg { width: 32px; height: 32px; }
.icon-xl { width: 48px; height: 48px; }

/* Icon containers */
.icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent);
    background: var(--dark-gray);
    transition: all 0.15s ease;
}

.icon-box:hover {
    background: var(--black);
    border-color: var(--accent-hot);
}

.icon-box-sm {
    width: 36px;
    height: 36px;
}

.icon-box-md {
    width: 48px;
    height: 48px;
}

.icon-box-lg {
    width: 64px;
    height: 64px;
}

/* Icon colors */
.icon-accent {
    color: var(--accent);
}

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

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

.icon-muted {
    color: var(--gray);
}

/* Icon animation: pulse */
.icon-pulse {
    animation: iconPulse 2s ease infinite;
}

@keyframes iconPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Icon animation: rotate */
.icon-spin {
    animation: iconSpin 2s linear infinite;
}

@keyframes iconSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Brutalist icon badge (number overlay) */
.icon-badge {
    position: relative;
}

.icon-badge::after {
    content: attr(data-count);
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    background: var(--accent-hot);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Brutalist decorative corner marks */
.corner-mark {
    position: relative;
}

.corner-mark::before,
.corner-mark::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--accent);
    border-style: solid;
}

.corner-mark::before {
    top: -4px;
    left: -4px;
    border-width: 2px 0 0 2px;
}

.corner-mark::after {
    bottom: -4px;
    right: -4px;
    border-width: 0 2px 2px 0;
}