/* Wrapped in @layer overrides — 2026-08-18, CSS @layer restructuring (Basecamp "Fra Fizzy-gjennomgang: CSS-arkitektur"). See sand_ui/__sand_ui.css for the layer order. */
@layer overrides {
:root {
    --height-xxs:  1rem;        /* 16px */
    --height-xs:   1.375rem;    /* 22px */
    --height-sm:   1.75rem;     /* 28px */
    --height-base: 2rem;        /* 32px */
    --height-md:   2.25rem;     /* 36px */
    --height-lg:   2.625rem;    /* 42px */
    --height-xl:   3rem;        /* 48px */
    --height-2xl:  3.5rem;      /* 56px */
    --height-3xl:  4.25rem;     /* 68px */
}


} /* @layer overrides */

@layer components {
    .ui-button, .ui-avatar, .ui-input, .ui-select, .ui-badge {
        &.size-xxs  { height: var(--height-xxs); }
        &.size-xs   { height: var(--height-xs);  }
        &.size-sm   { height: var(--height-sm);  }
        &.size-base { }
        &.size-md   { height: var(--height-md);  }
        &.size-lg   { height: var(--height-lg);  }
        &.size-xl   { height: var(--height-xl);  }
        &.size-2xl  { height: var(--height-2xl); }
        &.size-3xl  { height: var(--height-3xl); }
    }
}