/* Spacing, sizing and radius (visual direction › metrics.css). A 4px grid in rem, assuming a 16px root. */
:root {
    --space-0-5: 0.125rem;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --control-height: 2rem;
    --textarea-min-height: 5rem;
    --table-header-height: 2rem;
    --table-row-height: 2.25rem;
    --nav-item-height: 2.25rem;
    --menu-item-height: 2rem;
    --command-bar-height: 3rem;
    --nav-rail-collapsed: 3rem;
    --nav-rail-expanded: 15rem;
    --page-padding: 1.5rem;
    --form-max-width: 45rem;
    --dialog-max-width: 35rem;
    --icon-size: 1rem;
    --icon-size-large: 1.25rem;
    --radius-control: 0.25rem;
    --radius-overlay: 0.5rem;
    --stroke-thickness: 1px;
    --focus-ring: 2px;
}

@media (max-width: 639.98px) {
    :root {
        --page-padding: 1rem;
    }
}