/* Lucide SVG icon system — legacy PNG files remain on disk for rollback */
:root {
    --mk-icon-color: #64748b;
    --mk-icon-color-hover: #6d28d9;
    --mk-icon-color-active: #7c3aed;
    --mk-icon-stroke: 2;
    --mk-icon-gap-inline: 0.5rem;
}

.df-decor-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
    vertical-align: middle;
    color: var(--mk-icon-color);
    transition: color 0.12s ease;
    width: var(--df-decor-size, 1.75rem);
    height: var(--df-decor-size, 1.75rem);
}

.df-decor-icon svg,
.df-decor-icon img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
}

.df-decor-icon svg.df-lucide-svg {
    fill: none;
    stroke: currentColor;
    stroke-width: var(--mk-icon-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
}

.df-decor-icon img {
    object-fit: contain;
}

.df-decor-icon:hover {
    color: var(--mk-icon-color-hover);
}

/* Context sizes — sidebar 20px, dashboard 24px, button 18px */
.df-decor-icon--inline {
    --df-decor-size: 1.125rem;
    --mk-icon-stroke: 1.75;
}

.df-decor-icon--nav {
    --df-decor-size: 1.25rem;
    --mk-icon-stroke: 1.75;
}

.df-decor-icon--xs {
    --df-decor-size: 1rem;
    --mk-icon-stroke: 1.75;
}

.df-decor-icon--sm {
    --df-decor-size: 1.25rem;
    --mk-icon-stroke: 1.75;
}

.df-decor-icon--metric {
    --df-decor-size: 1.5rem;
    --mk-icon-stroke: 2;
}

.df-decor-icon--md {
    --df-decor-size: 1.75rem;
    --mk-icon-stroke: 2;
}

.df-decor-icon--lg {
    --df-decor-size: 2.25rem;
    --mk-icon-stroke: 2;
}

.df-decor-icon--xl {
    --df-decor-size: 2.75rem;
    --mk-icon-stroke: 2;
}

.df-decor-icon--hero {
    --df-decor-size: 3.5rem;
    --mk-icon-stroke: 2;
}

/* Icon + text spacing when not inside a flex gap container */
.df-decor-icon--inline:not(:last-child) {
    margin-inline-end: 0.375rem;
}

:is(.ws-nav-item, .ws-nav-btn, .mk-hub-head-btn, .mk-hero-btn, .crm-dash-act) > .df-decor-icon + :is(span, a, button) {
    margin-inline-start: 0;
}

.df-decor-icon--boxed {
    width: calc(var(--df-decor-size, 1.75rem) + 0.65rem);
    height: calc(var(--df-decor-size, 1.75rem) + 0.65rem);
    border-radius: 10px;
    background: rgba(124, 58, 237, 0.12);
}

.df-decor-icon--boxed.df-decor-icon--violet { background: rgba(124, 58, 237, 0.14); }
.df-decor-icon--boxed.df-decor-icon--sky { background: rgba(14, 165, 233, 0.14); }
.df-decor-icon--boxed.df-decor-icon--emerald { background: rgba(16, 185, 129, 0.14); }
.df-decor-icon--boxed.df-decor-icon--amber { background: rgba(245, 158, 11, 0.14); }
.df-decor-icon--boxed.df-decor-icon--indigo { background: rgba(79, 70, 229, 0.14); }
.df-decor-icon--boxed.df-decor-icon--rose { background: rgba(244, 63, 94, 0.14); }
.df-decor-icon--boxed.df-decor-icon--cyan { background: rgba(6, 182, 212, 0.14); }

.df-decor-illustration img {
    width: var(--df-decor-size, 3.5rem);
    height: auto;
    max-height: 5.5rem;
}

/* Fit inside existing marketing icon shells */
.mk-eco-icon .df-decor-icon,
.mk-workflow-icon .df-decor-icon,
.mk-tier-icon .df-decor-icon,
.mk-cap-icon .df-decor-icon,
.mk-cap-cluster-icon .df-decor-icon,
.mk-crm-feat-icon .df-decor-icon,
.mk-nationwide-point-icon .df-decor-icon,
.seo-feature-card .df-decor-icon,
.seo-kicker-icon .df-decor-icon,
.mk-pub-kicker .df-decor-icon,
.edu-path-tab-icon .df-decor-icon,
.edu-module-head-icon .df-decor-icon,
.mk-bot-pipeline-icon .df-decor-icon,
.mk-data-bento-icon .df-decor-icon,
.mk-data-radar-core .df-decor-icon {
    width: 100%;
    height: 100%;
}

.mk-eco-icon .df-decor-icon,
.mk-workflow-icon .df-decor-icon,
.mk-tier-icon .df-decor-icon {
    --df-decor-size: 1.15rem;
    --mk-icon-stroke: 1.75;
}

.mk-cap-icon .df-decor-icon,
.mk-cap-cluster-icon .df-decor-icon {
    --df-decor-size: 0.95rem;
    --mk-icon-stroke: 1.75;
}

.mk-crm-feat-icon .df-decor-icon,
.mk-nationwide-point-icon .df-decor-icon {
    --df-decor-size: 1.1rem;
    --mk-icon-stroke: 1.75;
}

.seo-feature-card > .df-decor-icon,
.seo-feature-card > .mk-icon .df-decor-icon {
    --df-decor-size: 1.35rem;
    --mk-icon-stroke: 1.75;
}

.mk-bot-pipeline-icon .df-decor-icon {
    --df-decor-size: 1rem;
    --mk-icon-stroke: 1.75;
}

.mk-data-export-btn .df-decor-icon {
    --df-decor-size: 0.85rem;
    --mk-icon-stroke: 1.75;
    margin-inline-end: 0.25rem;
    vertical-align: -0.15em;
}