/* Milk's compact type scale.
   These sizes stay distinct so tags, helper copy, and card text do not all
   inflate to the same size. Component styles remain in control of typography. */
:root {
    --milk-type-micro: 9px;
    --milk-type-tag: 10px;
    --milk-type-small: 11px;
    --milk-form-text: 12px;
}

.text-\[8px\],
.text-\[9px\] {
    font-size: var(--milk-type-micro) !important;
    line-height: 1.2 !important;
}

.text-\[10px\] {
    font-size: var(--milk-type-tag) !important;
    line-height: 1.25 !important;
}

.text-xs,
.text-\[11px\] {
    font-size: var(--milk-type-small) !important;
    line-height: 1.35 !important;
}

/* Kept for explicitly opted-in legacy components; no runtime classes are added. */
.milk-readable-small {
    font-size: var(--milk-type-small) !important;
    line-height: 1.35 !important;
}

.milk-readable-compact {
    font-size: var(--milk-type-tag) !important;
    line-height: 1.25 !important;
}

.milk-readable-tag,
.site-theme-inventory-preview > span {
    font-size: var(--milk-type-micro) !important;
    line-height: 1.15 !important;
}

input,
textarea,
select,
option {
    font-size: max(var(--milk-form-text), 1em);
}

small {
    line-height: 1.35;
}

@media (max-width: 640px) {
    :root {
        /* Prevents mobile browsers from zooming focused form controls. */
        --milk-form-text: 16px;
    }
}