/* ============================================================
   EAZYDEV handcrafted icon system — global styling.

   Loaded by base.html, public_base.html, platform_admin/base.html.
   Pairs with stock/templatetags/ez_icons.py +
   template/icons/_dispatch.html.

   Every glyph inherits its color from `currentColor`, so the
   utilities below set color (or background) only — never override
   stroke widths or stroke-linecap/linejoin.
============================================================ */

:root {
    --ez-brand-500: #6366f1;
    --ez-brand-600: #5b5cf0;
    --ez-brand-700: #4f46e5;
    --ez-brand-violet: #8b5cf6;
    --ez-success: #16a34a;
    --ez-warning: #f59e0b;
    --ez-danger:  #dc2626;
}

/* Base glyph — inline-block so it sits cleanly next to text. */
.ez-ico {
    display: inline-block;
    vertical-align: -0.18em;
    flex-shrink: 0;
    line-height: 1;
    color: currentColor;
}

/* Size modifiers (default size comes from the {% ez_icon %} tag). */
.ez-ico-lg { width: 28px;  height: 28px;  }
.ez-ico-xl { width: 36px;  height: 36px;  }

/* Orientation modifiers.
 * .ez-ico--flip mirrors an icon horizontally — used to turn the shared
 * "arrow-right" glyph into a left-pointing "Back / Previous" arrow.
 * (Referenced by ~12 templates incl. the reviews carousel prev button.) */
.ez-ico--flip     { transform: scaleX(-1); }
.ez-ico--rotate90 { transform: rotate(90deg); }

/* Color modifiers — use these on the <svg class="ez-ico ..."> directly. */
.ez-ico--brand    { color: var(--ez-brand-600); }
.ez-ico--success  { color: var(--ez-success);   }
.ez-ico--warning  { color: var(--ez-warning);   }
.ez-ico--danger   { color: var(--ez-danger);    }
.ez-ico--muted    { color: rgba(15, 23, 42, 0.55); }
.ez-ico--white    { color: #ffffff; }

/* Decorative "tile" — 40x40 rounded brand-gradient square, white glyph.
   Used for premium section heads, dashboard widgets, AI cards. */
.ez-ico-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--ez-brand-500) 0%, var(--ez-brand-violet) 100%);
    color: #ffffff;
    box-shadow:
        0 6px 16px -6px rgba(99, 102, 241, 0.55),
        0 2px 4px rgba(15, 23, 42, 0.10);
    flex-shrink: 0;
}

/* Soft secondary variant — tinted indigo wash, brand-colored glyph. */
.ez-ico-badge.soft {
    background: rgba(99, 102, 241, 0.12);
    color: var(--ez-brand-700);
    box-shadow: none;
}

.ez-ico-badge.success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); }
.ez-ico-badge.warning { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.ez-ico-badge.danger  { background: linear-gradient(135deg, #f87171 0%, #dc2626 100%); }

.ez-ico-badge.sm { width: 32px; height: 32px; border-radius: 10px; }
.ez-ico-badge.lg { width: 48px; height: 48px; border-radius: 14px; }

/* Placeholder (unknown icon name) — barely visible but never crashes. */
.ez-ico--placeholder { color: rgba(15, 23, 42, 0.30); }