/* Mobile Bottom Toolbar — token-aware overrides
   Base layout/structure already exists in style.css.
   This file replaces the hardcoded colours with design tokens
   so the AI skin engine can control the toolbar's appearance. */

.halo-toolbar-bottom-mobile {
    background: var(--color-bg-primary);
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.10);
}

.halo-toolbar-bottom-mobile .halo-toolbar-wrapper .halo-toolbar-item .link svg {
    fill: var(--color-text-secondary);
    stroke: transparent;
}

.halo-toolbar-bottom-mobile .halo-toolbar-wrapper .halo-toolbar-item .label {
    color: var(--color-text-secondary);
}

.halo-toolbar-bottom-mobile .halo-toolbar-wrapper .halo-toolbar-item .link:hover svg,
.halo-toolbar-bottom-mobile .halo-toolbar-wrapper .halo-toolbar-item .link.active svg {
    fill: var(--color-primary);
}

.halo-toolbar-bottom-mobile .halo-toolbar-wrapper .halo-toolbar-item .link:hover .label,
.halo-toolbar-bottom-mobile .halo-toolbar-wrapper .halo-toolbar-item .link.active .label {
    color: var(--color-primary);
}

.halo-toolbar-bottom-mobile .halo-toolbar-wrapper .halo-toolbar-item .icon--cart .cart-count-bubble {
    background-color: var(--color-primary);
    min-width: 18px;
    min-height: 18px;
}

.halo-toolbar-bottom-mobile .halo-toolbar-wrapper .halo-toolbar-item .icon--cart .cart-count-bubble .text-count {
    color: var(--color-bg-primary);
    font-size: 11px;
}