/* =========================================================
   AJUS icon boxes
   Reusable fixed-size, token-colored box holding an icon glyph.

   Use the base class plus exactly ONE tone variant; add a size
   variant only when the default does not fit.

       <span class="ajus-icon-box ajus-icon-box--primary" aria-hidden="true">
           <i class="fas fa-wrench"></i>
       </span>

   For a decorative glyph pair the box with `aria-hidden="true"`;
   when the box is the only affordance, give it an accessible name
   (`aria-label`) instead.
   ========================================================= */

.ajus-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    color: var(--color-primary);
    font-size: 1rem;
    line-height: 1;
}

/* ---- Tones (exactly one) ---- */

.ajus-icon-box--surface {
    background: var(--color-bg-surface-soft);
}

.ajus-icon-box--primary {
    background: var(--color-bg-primary-soft);
    color: var(--color-primary);
}

.ajus-icon-box--success {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.ajus-icon-box--warning {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

.ajus-icon-box--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.ajus-icon-box--info {
    background: var(--color-info-soft);
    color: var(--color-info);
}

.ajus-icon-box--outline {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-soft);
}

/* ---- Sizes (optional) ---- */

.ajus-icon-box--xs {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.5625rem;
    font-size: 1rem;
}

.ajus-icon-box--sm {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.7rem;
    font-size: 0.95rem;
}

.ajus-icon-box--lg {
    width: 2.9rem;
    height: 2.9rem;
    border-radius: var(--radius-lg);
    font-size: 1.2rem;
}