/* ============================================
   STRAHLKRAFT40+ ICON SYSTEM
   Premium Lucide Icons - Dark Luxury Edition
   ============================================ */

/* BASE ICON STYLES */
.icon {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: middle;
    stroke: #D4AF37; /* Gold primary */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    margin: 0 0.3em;
}

/* ICON VARIANTS BY CONTEXT */
.icon-science {
    stroke: #D4AF37; /* Same gold - unified color */
    stroke-width: 1.5;
}

.icon-brand {
    stroke: #D4AF37; /* Same gold - unified color */
    stroke-width: 1.5;
}

.icon-neutral {
    stroke: #D4AF37; /* Same gold - unified color */
    stroke-width: 1.5;
}

.icon-warning {
    stroke: #D4AF37;
    fill: rgba(212, 175, 55, 0.1); /* Subtle fill for warnings */
    stroke-width: 1.5;
}

/* SIZE VARIANTS */
.icon-small {
    width: 0.9em;
    height: 0.9em;
}

.icon-medium {
    width: 1.2em;
    height: 1.2em;
}

.icon-large {
    width: 1.6em;
    height: 1.6em;
}

.icon-xlarge {
    width: 2em;
    height: 2em;
}

/* INLINE USAGE - for text integration */
.icon-inline {
    display: inline;
    vertical-align: -0.125em;
    margin: 0 0.2em;
}

/* BLOCK USAGE - for standalone icons */
.icon-block {
    display: block;
    margin: 0 auto 1rem;
    width: 2.5em;
    height: 2.5em;
}

/* HOVER EFFECTS (optional) */
.icon-hover:hover {
    stroke: #FFD700; /* Brighter gold on hover */
    transition: stroke 0.2s ease;
}

/* ACCESSIBILITY */
.icon[aria-label] {
    cursor: help;
}

/* USAGE IN HEADERS */
h1 .icon, h2 .icon, h3 .icon {
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4em;
}

/* USAGE IN LISTS */
ul .icon, ol .icon {
    margin-right: 0.5em;
}

/* MISSION BOX ICONS */
.mission-icon {
    width: 1.5em;
    height: 1.5em;
    stroke: #D4AF37;
    stroke-width: 1.8;
    margin-right: 0.8em;
    flex-shrink: 0;
}

/* RESPONSIVE SIZES */
@media screen and (max-width: 768px) {
    .icon {
        width: 1.1em;
        height: 1.1em;
    }

    .icon-block {
        width: 2em;
        height: 2em;
    }
}

/* PRINT STYLES */
@media print {
    .icon {
        stroke: #666666; /* Darker for better print visibility */
        stroke-width: 2;
    }
}

/* ============================================
   SPECIFIC ICON CLASSES (optional shortcuts)
   ============================================ */

/* Most used icons can have dedicated classes */
.icon-target { /* 🎯 Mission/Objetivo */
    /* Can add specific positioning or size here */
}

.icon-clock { /* ⏰ Time/Horario */
    /* Can add specific styling here */
}

.icon-lightbulb { /* 💡 Insight */
    /* Can add specific styling here */
}

.icon-microscope { /* 🔬 Science */
    /* Can add specific styling here */
}

.icon-sparkles { /* ✨ Transformation */
    /* Can add specific styling here */
}

/* ============================================
   USAGE EXAMPLES:

   Basic inline:
   <svg class="icon" viewBox="0 0 24 24">...</svg>

   With context variant:
   <svg class="icon icon-science" viewBox="0 0 24 24">...</svg>

   With size variant:
   <svg class="icon icon-large" viewBox="0 0 24 24">...</svg>

   Combined:
   <svg class="icon icon-science icon-large" viewBox="0 0 24 24">...</svg>

   ============================================ */