/* ====================================
   ICONS.CSS - SVG Icon System Component
   ==================================== */

/*
 * Centralized icon styling system using SVG sprites
 * Icons scale with font-size and inherit theme colors through CSS tokens
 * Depends on: 01-tokens.css for color variables
 */

/* Base icon component */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex-shrink: 0;
    transition: fill 0.2s ease;
    fill: var(--icon-color, var(--text-secondary));
    vertical-align: middle;
}

/* Icon hover states - inherits from parent context */
.icon:hover {
    fill: var(--text-primary);
}

/* Navigation-specific icon states */
.nav-item .icon {
    fill: var(--text-secondary);
}

.nav-item:hover .icon,
.nav-item.active .icon {
    fill: var(--accent-primary);
}

/* Navigation icon container sizing - matches existing 20px × 20px */
.nav-icon .icon {
    width: 20px;
    height: 20px;
}

/* Chart icon context - matches existing 24px font-size */
.chart-icon .icon {
    width: 24px;
    height: 24px;
    fill: var(--text-secondary);
}

/* Focus states for accessibility */
.nav-item:focus .icon,
.nav-item:focus-visible .icon {
    fill: var(--accent-primary);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .icon {
        fill: var(--text-primary);
    }
    
    .nav-item:hover .icon,
    .nav-item.active .icon,
    .nav-item:focus .icon {
        fill: var(--accent-primary);
        filter: contrast(1.2);
    }
}

/* Reduced motion preferences - transitions handled by global animations.css */
@media (prefers-reduced-motion: reduce) {
    .icon {
        transition: none;
    }
}

/* Stroke-иконки: глушим fill и красим stroke */
.icon.icon--stroke,
.icon.icon--stroke * {
    fill: none !important;                /* перекрываем .nav-item .icon */
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;    /* опционально: одинаковая толщина при масштабировании */
}

/* Состояния навигации для stroke-иконок */
.nav-item:hover .icon.icon--stroke,
.nav-item.active .icon.icon--stroke,
.nav-item:focus .icon.icon--stroke,
.nav-item:focus-visible .icon.icon--stroke {
    stroke: var(--accent-primary);
}

/* High-contrast: не заливаем stroke-иконки */
@media (prefers-contrast: high) {
    .icon.icon--stroke,
    .icon.icon--stroke * {
        fill: none !important;
        stroke: var(--text-primary);
    }
    .nav-item:hover .icon.icon--stroke,
    .nav-item.active .icon.icon--stroke,
    .nav-item:focus .icon.icon--stroke {
        stroke: var(--accent-primary);
    }
}

/* Единая толщина контура для stroke-иконок */
:root {
    --icon-stroke-w: 1.75; /* можно 1.5–2.0 в зависимости от плотности шрифта */
}

/* Контурные иконки: без заливки, с едиными свойствами штриха */
.icon.icon--stroke,
.icon.icon--stroke * {
    fill: none !important;
    stroke: currentColor;
    stroke-width: var(--icon-stroke-w);
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Состояния навигации — цвет наследуется через currentColor */
.nav-item { color: var(--text-secondary); }
.nav-item:hover,
.nav-item.active,
.nav-item:focus,
.nav-item:focus-visible { color: var(--accent-primary); }