/* ============================================================
   StepAnd.me - Custom SVG Icon System
   All icons use currentColor for automatic theme adaptation.
   Include icons.svg sprite sheet on the page.
   ============================================================ */

/* Base icon class */
.svgi {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Filled icons override */
.svgi-fill {
    fill: currentColor;
    stroke: none;
}

/* Icon sizes */
.svgi-sm  { width: 0.75em; height: 0.75em; }
.svgi-md  { width: 1em;    height: 1em; }
.svgi-lg  { width: 1.25em; height: 1.25em; }
.svgi-xl  { width: 1.5em;  height: 1.5em; }
.svgi-2xl { width: 2em;    height: 2em; }
.svgi-3xl { width: 3em;    height: 3em; }
.svgi-4xl { width: 4em;    height: 4em; }

/* Animated icons */
.svgi-spin   { animation: svgiSpin 2s linear infinite; }
.svgi-pulse  { animation: svgiPulse 2s ease-in-out infinite; }
.svgi-bounce { animation: svgiBounce 1s ease-in-out infinite; }
.svgi-float  { animation: svgiFloat 3s ease-in-out infinite; }

@keyframes svgiSpin   { to   { transform: rotate(360deg); } }
@keyframes svgiPulse  { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes svgiBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes svgiFloat  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Icon color utilities */
.svgi-gold     { color: var(--gold, #fbbf24); }
.svgi-gem      { color: var(--gem, #c084fc); }
.svgi-xp       { color: var(--accent-primary); }
.svgi-danger   { color: var(--danger, #ff4757); }
.svgi-success  { color: var(--success, #2ed573); }
.svgi-warning  { color: var(--warning, #ffa502); }
.svgi-info     { color: var(--info, #1e90ff); }
.svgi-muted    { color: var(--text-muted); }

/* Icon glow effects */
.svgi-glow {
    filter: drop-shadow(0 0 4px currentColor);
}
.svgi-glow-gold {
    color: var(--gold);
    filter: drop-shadow(0 0 6px rgba(251,191,36,0.5));
}
.svgi-glow-xp {
    color: var(--accent-primary);
    filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* Inline SVG using sprite */
.svgi-use {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    flex-shrink: 0;
}

/* Boss sprite special sizing */
.boss-sprite .svgi-use {
    width: 4rem;
    height: 4rem;
}

/* Character avatar special sizing */
.char-avatar .svgi-use {
    width: 3.5rem;
    height: 3.5rem;
}

/* Logo icon */
.logo-icon .svgi-use {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 8px var(--accent-glow));
    animation: svgiPulse 3s ease-in-out infinite;
}


/* Default SVG icon coloring - ensures icons are visible in all themes */
.svgi-use {
    color: inherit; /* Inherit from parent */
}

/* In buttons, icons should match button text color */
button .svgi-use,
.btn-primary .svgi-use,
.btn-secondary .svgi-use,
.btn-accent .svgi-use,
.btn-danger .svgi-use {
    color: inherit;
}

/* Gold display icons */
.gold-display .svgi-use { color: var(--gold, #fbbf24); }
.gems-display .svgi-use { color: var(--gem, #c084fc); }

/* Stat card icons */
.stat-icon .svgi-use { color: var(--accent-primary); }

/* Boss sprite */
.boss-sprite .svgi-use { 
    color: var(--danger, #ff4757);
    filter: drop-shadow(0 0 10px rgba(255,71,87,0.4));
}

/* Character avatar */
.char-avatar .svgi-use {
    color: var(--accent-primary);
    filter: drop-shadow(0 0 15px var(--accent-glow));
}

/* Mood buttons */
.mood-btn .svgi-use { color: inherit; }
.mood-btn.selected .svgi-use { color: var(--bg-primary); }

/* Category pills */
.cat-pill .svgi-use { color: inherit; }
.cat-pill.active .svgi-use { color: var(--bg-primary); }

/* Priority indicators */
.svgi-danger { color: var(--danger, #ff4757) !important; }
.svgi-success { color: var(--success, #2ed573) !important; }
.svgi-warning { color: var(--warning, #ffa502) !important; }
.svgi-info { color: var(--info, #1e90ff) !important; }
.svgi-gold { color: var(--gold, #fbbf24) !important; }
.svgi-gem { color: var(--gem, #c084fc) !important; }
.svgi-xp { color: var(--accent-primary) !important; }
.svgi-muted { color: var(--text-muted) !important; }

/* Habit category icons */
.habit-card-icon .svgi-use { color: var(--accent-primary); }

/* Quest card icons */
.quest-card-icon .svgi-use { color: var(--accent-primary); }

/* Achievement icons */
.ach-unlock-icon .svgi-use { 
    color: var(--gold, #fbbf24);
    font-size: 3rem;
}

/* Level badge */
.level-icon .svgi-use { color: var(--accent-primary); }

/* Section headers */
.section-header h2 .svgi-use { color: var(--accent-primary); }

/* Toast icons */
.toast .svgi-use { color: inherit; }

/* Skill nodes */
.skill-icon .svgi-use { color: var(--accent-primary); }
.skill-node.unlocked .skill-icon .svgi-use { color: var(--success); }

/* Inventory items */
.inv-item-icon .svgi-use { color: inherit; }

/* Forge items */
.focus-timer-circle .svgi-use { color: var(--accent-primary); }

/* Breathing circle */
.breathe-circle .svgi-use { color: var(--accent-primary); }

/* Typing heading */
.typing-heading .svgi-use { color: var(--accent-primary); }

/* Ensure SVGs inside glass-cards get proper coloring */
.glass-card .svgi-use { color: inherit; }

/* Dark theme specific overrides */
[data-theme="dark"] .svgi-use { color: inherit; }
[data-theme="dark"] .boss-sprite .svgi-use { color: #ff4757; }
[data-theme="dark"] .char-avatar .svgi-use { color: #00ff88; }

/* Light theme specific overrides */
[data-theme="light"] .svgi-use { color: inherit; }
[data-theme="light"] .boss-sprite .svgi-use { color: #e74c3c; }
[data-theme="light"] .char-avatar .svgi-use { color: #6c5ce7; }


/* ===== VIBRANT SVG ICON STYLING ===== */

/* Gold icon - shiny gold effect */
.svgi-gold {
    color: #fbbf24 !important;
    filter: drop-shadow(0 0 3px rgba(251,191,36,0.5));
}

/* Gem icon - purple sparkle */
.svgi-gem {
    color: #c084fc !important;
    filter: drop-shadow(0 0 4px rgba(192,132,252,0.5));
}

/* XP/Energy icon - bright green glow */
.svgi-xp {
    color: var(--accent-primary) !important;
    filter: drop-shadow(0 0 4px var(--accent-glow));
}

/* Fire/streak icon - warm glow */
.svgi-warning {
    color: #ffa502 !important;
    filter: drop-shadow(0 0 3px rgba(255,165,2,0.4));
}

/* Boss icons - menacing red */
.boss-sprite .svgi-use {
    color: #ff4757 !important;
    filter: drop-shadow(0 0 12px rgba(255,71,87,0.5));
    animation: svgiPulse 2s ease-in-out infinite;
}

/* Avatar - bright and floating */
.char-avatar .svgi-use {
    color: var(--accent-primary) !important;
    filter: drop-shadow(0 0 15px var(--accent-glow));
}

/* Stat card icons */
.stat-icon .svgi-use {
    color: var(--accent-primary) !important;
    filter: drop-shadow(0 0 3px var(--accent-glow));
}

/* Category pill icons */
.cat-pill .svgi-use { transition: all 0.3s ease; }
.cat-pill.active .svgi-use { 
    color: var(--bg-primary) !important;
    filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
}

/* Shop item icons */
.shop-item .svgi-use {
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
}

/* Skill node icons */
.skill-node .skill-icon .svgi-use {
    filter: drop-shadow(0 0 3px var(--accent-glow));
}
.skill-node.available .skill-icon .svgi-use {
    animation: svgiPulse 2s ease-in-out infinite;
}

/* Achievement unlock icon */
.ach-unlock-icon .svgi-use {
    color: #fbbf24 !important;
    filter: drop-shadow(0 0 10px rgba(251,191,36,0.6));
    animation: svgiFloat 2s ease-in-out infinite;
}

/* Quest card icons */
.quest-card-icon .svgi-use {
    color: var(--accent-primary) !important;
}

/* Habit card category icons */
.habit-card-icon .svgi-use {
    filter: drop-shadow(0 0 2px var(--accent-glow));
}

/* Gold/Gem display in header */
.gold-display .svgi-use,
.gems-display .svgi-use {
    vertical-align: -0.15em;
}

/* Forge recipe icons */
.fg-btn .svgi-use { color: inherit; }

/* Mystery box icon */
.mystery-box .svgi-use {
    animation: svgiBounce 1s ease-in-out infinite;
}

/* Make sure SVGs in glass cards pop */
.glass-card > .svgi-use:first-child {
    filter: drop-shadow(0 0 3px var(--accent-glow));
}

/* Streak milestone cards */
.streak-milestone-card .svgi-use {
    filter: drop-shadow(0 0 3px rgba(251,191,36,0.4));
}

/* Achievement tier cards */
.achievement-tier-card .svgi-use {
    filter: drop-shadow(0 0 3px rgba(192,132,252,0.4));
}