/* ============================================================
   .uk-icon-box — proposed canonical icon-box subsystem (loaded only on /docs/ui-kit)
   ============================================================
   Replaces the legacy `.icon-box` family in `public/css/style.css`:

     .icon-box                   -> .uk-icon-box                       (default md size + primary tone)
     .icon-box-sm                -> .uk-icon-box .uk-icon-box--sm
     .icon-box-lg                -> .uk-icon-box .uk-icon-box--lg
     .icon-box-primary           -> .uk-icon-box .uk-icon-box--primary    (no-op when default; explicit when paired with another tone-affecting context)
     .icon-box-accent            -> .uk-icon-box .uk-icon-box--accent
     .icon-box-success           -> .uk-icon-box .uk-icon-box--success
     .icon-box svg               -> .uk-icon-box svg                   (size driven by box modifier; colour inherited via currentColor)

   Plus per-page reproductions of the same chrome — every consumer in
   education.css / pricing.css / locations.css / location-detail.css /
   tools.css / privacy.css / product-news.css that re-declares
   `width: var(--icon-box-md); height: var(--icon-box-md); border-radius: ...`
   on a different selector collapses onto this canonical at Phase 3
   migration time.

   Composes with: nothing — this is a leaf primitive used by uk-stat-card,
   uk-features-checklist, uk-problem-solution and most marketing surfaces.

   Tone is communicated through `color` on the box itself; the inner `<svg>`
   inherits via `currentColor`. That keeps the public API to one modifier per
   tone (no separate `.uk-icon-box--accent svg` rule on the consumer side).
   ============================================================ */

/* ============================================
   Root — default md size, primary tone
   ============================================ */
.uk-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--icon-box-md);
    height: var(--icon-box-md);
    border-radius: var(--radius-lg);
    background: rgba(var(--color-primary-rgb), 0.12);
    border: 1px solid rgba(var(--color-primary-rgb), 0.25);
    color: var(--color-primary-light);
}

.uk-icon-box svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
    color: currentColor;
    stroke: currentColor;
}

/* ============================================
   Sizes — sm / md (default) / lg
   ============================================
   Each size scales both the box and the inner svg in lockstep so consumers
   never have to set svg sizing themselves.
   ============================================ */
.uk-icon-box--sm {
    width: var(--icon-box-sm);
    height: var(--icon-box-sm);
    border-radius: var(--radius-md);
}

.uk-icon-box--sm svg {
    width: var(--icon-md);
    height: var(--icon-md);
}

.uk-icon-box--md {
    width: var(--icon-box-md);
    height: var(--icon-box-md);
    border-radius: var(--radius-lg);
}

.uk-icon-box--md svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
}

.uk-icon-box--lg {
    width: var(--icon-box-lg);
    height: var(--icon-box-lg);
    border-radius: var(--radius-xl);
}

.uk-icon-box--lg svg {
    width: var(--icon-xl);
    height: var(--icon-xl);
}

/* ============================================
   Tones — primary (default) / accent / success
   ============================================
   Background + border share one rgba ramp at 12% / 25% opacity so every tone
   reads at the same visual weight. `color` carries the tint that the inner
   svg picks up via currentColor.
   ============================================ */
.uk-icon-box--primary {
    background: rgba(var(--color-primary-rgb), 0.12);
    border-color: rgba(var(--color-primary-rgb), 0.25);
    color: var(--color-primary-light);
}

.uk-icon-box--accent {
    background: rgba(var(--color-accent-rgb), 0.12);
    border-color: rgba(var(--color-accent-rgb), 0.25);
    color: var(--color-accent);
}

.uk-icon-box--success {
    background: rgba(var(--color-success-rgb), 0.12);
    border-color: rgba(var(--color-success-rgb), 0.25);
    color: var(--color-success);
}