/* ============================================
   Premium Icon System
   Custom-made icon language for the Lumentree UI
   Unified around the refined sky-blue glass theme
   ============================================ */

.premium-icon {
    --pi-size: 20px;
    --pi-radius: 999px;
    --pi-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(34, 211, 238, 0.1));
    --pi-border: rgba(56, 189, 248, 0.35);
    --pi-color: #0ea5e9;
    --pi-shadow: 0 10px 24px rgba(14, 165, 233, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pi-size);
    height: var(--pi-size);
    min-width: var(--pi-size);
    border-radius: var(--pi-radius);
    background: var(--pi-bg);
    border: 1px solid var(--pi-border);
    color: var(--pi-color);
    box-shadow: var(--pi-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    line-height: 1;
    vertical-align: middle;
}

.premium-icon:hover {
    transform: translateY(-1px) scale(1.04);
}

.premium-icon__svg {
    width: calc(var(--pi-size) * 0.52);
    height: calc(var(--pi-size) * 0.52);
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.premium-icon--xs { --pi-size: 18px; }
.premium-icon--sm { --pi-size: 22px; }
.premium-icon--md { --pi-size: 28px; --pi-radius: 10px; }
.premium-icon--lg { --pi-size: 36px; --pi-radius: 12px; }
.premium-icon--xl { --pi-size: 52px; --pi-radius: 16px; }

.premium-icon--soft {
    --pi-bg: linear-gradient(135deg, rgba(226, 232, 240, 0.75), rgba(186, 230, 253, 0.45));
    --pi-border: rgba(148, 163, 184, 0.26);
    --pi-color: #0f172a;
    --pi-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.premium-icon--sky,
.premium-icon--info {
    --pi-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(34, 211, 238, 0.12));
    --pi-border: rgba(56, 189, 248, 0.38);
    --pi-color: #0ea5e9;
    --pi-shadow: 0 10px 24px rgba(14, 165, 233, 0.18);
}

.premium-icon--cyan {
    --pi-bg: linear-gradient(135deg, rgba(6, 182, 212, 0.24), rgba(34, 211, 238, 0.12));
    --pi-border: rgba(34, 211, 238, 0.38);
    --pi-color: #06b6d4;
    --pi-shadow: 0 10px 24px rgba(6, 182, 212, 0.18);
}

.premium-icon--amber {
    --pi-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.24), rgba(245, 158, 11, 0.12));
    --pi-border: rgba(251, 191, 36, 0.38);
    --pi-color: #f59e0b;
    --pi-shadow: 0 10px 24px rgba(245, 158, 11, 0.18);
}

.premium-icon--violet {
    --pi-bg: linear-gradient(135deg, rgba(129, 140, 248, 0.24), rgba(168, 85, 247, 0.12));
    --pi-border: rgba(167, 139, 250, 0.38);
    --pi-color: #8b5cf6;
    --pi-shadow: 0 10px 24px rgba(139, 92, 246, 0.18);
}

.premium-icon--emerald {
    --pi-bg: linear-gradient(135deg, rgba(45, 212, 191, 0.22), rgba(16, 185, 129, 0.1));
    --pi-border: rgba(45, 212, 191, 0.36);
    --pi-color: #14b8a6;
    --pi-shadow: 0 10px 24px rgba(20, 184, 166, 0.16);
}

.premium-icon--rose,
.premium-icon--danger {
    --pi-bg: linear-gradient(135deg, rgba(251, 113, 133, 0.22), rgba(239, 68, 68, 0.1));
    --pi-border: rgba(251, 113, 133, 0.36);
    --pi-color: #f43f5e;
    --pi-shadow: 0 10px 24px rgba(244, 63, 94, 0.16);
}

.premium-icon--slate {
    --pi-bg: linear-gradient(135deg, rgba(148, 163, 184, 0.24), rgba(71, 85, 105, 0.12));
    --pi-border: rgba(148, 163, 184, 0.34);
    --pi-color: #64748b;
    --pi-shadow: 0 10px 24px rgba(71, 85, 105, 0.16);
}

.icon-label,
.icon-title,
.icon-button-label,
.icon-note-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.icon-title { gap: 12px; }
.icon-button-label { gap: 8px; }
.icon-note-label { gap: 8px; }

.icon-button-label .premium-icon {
    flex-shrink: 0;
}

.icon-card-title,
.icon-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.icon-empty-state {
    flex-direction: column;
}

.login-brand-icon {
    margin: 0 auto 16px;
}

.dark .premium-icon {
    --pi-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.24), rgba(34, 211, 238, 0.14));
    --pi-border: rgba(125, 211, 252, 0.24);
    --pi-color: #7dd3fc;
    --pi-shadow: 0 14px 28px rgba(14, 165, 233, 0.22);
}

.dark .premium-icon--soft {
    --pi-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.82), rgba(14, 165, 233, 0.16));
    --pi-border: rgba(125, 211, 252, 0.2);
    --pi-color: #e2e8f0;
    --pi-shadow: 0 14px 30px rgba(2, 132, 199, 0.14);
}

.dark .premium-icon--amber { --pi-color: #fbbf24; }
.dark .premium-icon--violet { --pi-color: #c4b5fd; }
.dark .premium-icon--emerald { --pi-color: #5eead4; }
.dark .premium-icon--rose,
.dark .premium-icon--danger { --pi-color: #fda4af; }
.dark .premium-icon--slate { --pi-color: #cbd5e1; }

/* Existing dashboard icon compatibility */
.solar-hero-pill-icon.premium-icon {
    --pi-size: 22px;
    --pi-radius: 7px;
}

.premium-icon.pi-temp {
    --pi-bg: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(249, 115, 22, 0.08));
    --pi-border: rgba(251, 146, 60, 0.26);
    --pi-color: #fb923c;
}

.premium-icon.pi-cloud {
    --pi-bg: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(100, 116, 139, 0.08));
    --pi-border: rgba(148, 163, 184, 0.26);
    --pi-color: #94a3b8;
}

.premium-icon.pi-uv {
    --pi-bg: linear-gradient(135deg, rgba(250, 204, 21, 0.2), rgba(234, 179, 8, 0.08));
    --pi-border: rgba(250, 204, 21, 0.28);
    --pi-color: #facc15;
}

.premium-icon.pi-savings,
.premium-icon.pi-zap,
.premium-icon.pi-sun,
.premium-icon.pi-grid,
.premium-icon.pi-cost,
.premium-icon.pi-trend,
.premium-icon.pi-chart {
    --pi-size: 28px;
    --pi-radius: 9px;
    --pi-bg: linear-gradient(135deg, rgba(14, 165, 233, 0.22), rgba(34, 211, 238, 0.1));
    --pi-border: rgba(56, 189, 248, 0.32);
    --pi-color: #0ea5e9;
    --pi-shadow: 0 12px 24px rgba(14, 165, 233, 0.14);
}

.dark .premium-icon.pi-savings,
.dark .premium-icon.pi-zap,
.dark .premium-icon.pi-sun,
.dark .premium-icon.pi-grid,
.dark .premium-icon.pi-cost,
.dark .premium-icon.pi-trend,
.dark .premium-icon.pi-chart {
    --pi-color: #7dd3fc;
    --pi-shadow: 0 14px 28px rgba(14, 165, 233, 0.18);
}